Feature request RANGE SLIDER

[tm8]

Many thanks for the great feature.

Is it planned to integrate a range slider, with which you can e.g. set two entities min and max value. That would be a great thing, as far as I have found, this is not yet available for HA.

The picture is only intended to explain the function and not the appearance.
Two entities can then be selected for the slider, for minimum and maximum value.
This is still missing in HA and would be a great addition.

Thanks Thomas

[Nerwyn]

What action would benefit from a dual thumb slider? AFAIK there are none that use a range as an input.

The sliders in this project are highly modified and stylized input range elements. Input range elements can only have one thumb, so a two thumb input range element would necessitate a completely different approach to sliders.

I don't think there's a good enough use case for this to make an entirely new custom feature element. You can get pretty close using two sliders and CSS styles:

  - type: custom:service-call
    entries:
      - type: slider
        entity_id: input_select.select_test
        range:
          - 0
          - 100
        tap_action:
          action: perform-action
          target:
            entity_id: input_select.select_test
          data: {}
        step: 1
        thumb: line
        styles: |-
          input {
            pointer-events: none;
          }
          ::-webkit-slider-thumb {
            pointer-events: all;
          }
          ::-moz-range-thumb {
            pointer-events: all;
          }
          .background {
            height: 12px;
            border-radius: 12px;
          }
      - type: slider
        entity_id: input_select.select_test
        range:
          - 0
          - 100
        tap_action:
          action: perform-action
          target:
            entity_id: input_select.select_test
          data: {}
        step: 1
        thumb: line
        styles: |-
          input {
            pointer-events: none;
          }
          ::-webkit-slider-thumb {
            pointer-events: all;
          }
          ::-moz-range-thumb {
            pointer-events: all;
          }
          .background {
            height: 12px;
            border-radius: 12px;
          }
    styles: |-
      custom-feature-slider {
        position: absolute;
      }
      .row {
        height: var(--feature-height);
        position: relative;
      }