Make slider bar thumb a block as opposed to a line

[u8915055]

Is your feature request related to a problem? Please describe. I am trying to implement your card but have a button of some sort that is the slider thumb as opposed to a line.. I think especially on mobile devices it would be handy to be able to grab a square/box and drag it as opposed to a line. I think it would give better feedback too as to what position you land on as again opposed to 2 pixel wide line as currently exists.

Describe the solution you'd like I would love to have an option to set the width of that line. I can see in the page source that it seems to be the element 'div.slider-thumb::before'. I have changed the width from 2 pixels to say 15 pixels using CSS which is a good look, but the 'button' only shows up when im actually dragging on it, but as soon as i let go, it disappears.. not sure yet why that is.

Any help would be greatly appreciated.. i will keep plugging away to see if there is a CSS way to do this.

Describe alternatives you've considered

Additional context

[u8915055]

Actually as an update, i have this working now. Using the card-mod capability. Here's what i have working so far:

        - type: custom:slider-button-card
          entity: media_player.office
          slider:
            direction: left-right
            background: gradient
          icon:
            tap_action:
              action: more-info
          action_button:
              mode: toggle
          style: |
            ha-card {
              border-radius: 10px;
            }
            ha-card .slider-thumb::before {
              opacity: 0.5;
              width: 70px;
              border-radius: 10px;
            }

you can adjust the width as you desire. Still going to see how to tweak it further but this is what i was after.. Hope this helps others.

[u8915055]

did a bit of an update on the styling.. i removed the background image that was there before the new rectangular slider thumb. Now the background behind the entire slider is the same, and that can be changed colour etc.

        - type: custom:slider-button-card
          entity: media_player.toms_office
          slider:
            direction: left-right
            background: gradient
          icon:
            tap_action:
              action: more-info
          action_button:
              mode: toggle
          style: |
            ha-card {
              border-radius: 10px;
            }
            ha-card .slider-thumb::before {
              opacity: 1;
              left: -1px;
              width: 70px;
              border-radius: 10px;
            }
            ha-card .changing .slider-thumb::before {
              opacity: 1;
              width: 70px;
              border-radius: 10px;
            }
            ha-card .slider-bg {
              background-image: none;
            }

Still will do some tweaking but this is what it looks like so far:

[u8915055]

Ok one final update.. i finally got it to where i wanted it.. again, more CSS. For some reason the state wasnt vertically centered so i fixed that. I also increased the size of the state and i removed the transition that was happening where the state text changed size when you moved the slider. I just wanted it all neat and simple. Im using this for media-player components and i have other button-card entities for the other functions.

Big Kudos to @mattieha for creating this.. super useful.

Here's the current css:

        - type: custom:slider-button-card
          entity: media_player.toms_office
          show_name: false
          compact: true
          slider:
            direction: left-right
          icon:
            show: false
          action_button:
            show: false
          style: |
            ha-card {
              border-radius: 10px;
            }
            ha-card .slider-thumb::before {
              opacity: .8;
              left: -1px;
              width: 70px;
              border-radius: 10px;
            }
            ha-card .changing .slider-thumb::before {
              opacity: .8;
              width: 70px;
              border-radius: 10px;
            }
            ha-card .slider-bg {
              background-image: none;
            }
            ha-card .text {
              top: 0.3rem;
              height: 100%;
              font-size: 1.7rem;
            }
            ha-card .changing .state {
              font-size: inherit;
            }

And here's what it looks like:

[u8915055]

One more cleaner update, was able to scale things so that the 'button' slider does not go off the right end when sliding to 100%. Little tighter on the graphics. Also added fully qualified css selectors so as not to upset any other cards.

        - type: custom:slider-button-card
          entity: media_player.toms_office
          show_name: false
          compact: true
          slider:
            direction: left-right
          icon:
            show: false
          action_button:
            show: false
          style: |
            ha-card.type-custom-slider-button-card {
              border-radius: 8px;
            }
            ha-card.type-custom-slider-button-card .slider-thumb::before {
              opacity: .8;
              left: -1px;
              width: 50px;
              border-radius: 8px;
              box-shadow: none;
            }
            ha-card.type-custom-slider-button-card .slider-thumb{
              transform:translateX(calc((var(--slider-value))* 0.95));
            }
            ha-card.type-custom-slider-button-card .changing .slider-thumb::before {
              opacity: .8;
              width: 50px;
              border-radius: 8px;
            }
            ha-card.type-custom-slider-button-card .slider-bg {
              background-image: none;
            }
            .compact .text {
              font-size: 1.25rem;
              top: -0.45rem !important;
              height: 140% !important;
              display: block !important;
              left: 0 !important;
            }
            ha-card.type-custom-slider-button-card .state {
              position: absolute;
              top: 0.4rem;
              line-height: normal !important;
            }
            ha-card.type-custom-slider-button-card .changing .state {
              font-size: inherit;
            }