The Sliders are mapped incorrectly if min value is other than 0 on multimeter card

[rusvasul]

I have been creating thermostats with the multimeter and I noticed that when I set the min temp on the guage to 30 the scale on the slider is completely off. I cant see a way to fix it other than in the Javascript so I figure ill put it in here and if I have a fix for it ill put it here too.

[snootched]

Do you mind sharing the yaml and a screenshot of what you are seeing? I can take a look.

[rusvasul]

I am pasting in the image and the yaml code. please keep in mind that I am an old controls engineer, not a programmer so I am still kind of new to github. this is my first issue post on someone else's project, I hope the image comes through. I put the minimum of the 1st and 3rd guage to 30 to illustrate my point, you can see that the slider does not map to the correct value displayed with the setpoint visible.

ill just put the code for the entire vertical stack in here

cards:
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: sensor.chillwatersupply_cws
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _min: 0
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: cws
    show_state: true
    show_units: true
    numeric_precision: 1
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: sensor.chillwaterreturn_cwr
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
      _min: 0
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: cwr
    show_state: true
    show_units: true
    numeric_precision: 1
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: climate.fv01
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
          background: {}
          inactive: var(--lcars-alert-white)
      attribute: current_temperature
      _min: 0
    tap_action:
      action: more-info
      perform_action: ""
      navigation_path: /history
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: fv01
    show_state: true
    show_units: true
    numeric_precision: 1
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: climate.fv02
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
      attribute: current_temperature
      _min: 0
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: fv02
    show_state: true
    show_units: true
    numeric_precision: 1
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: climate.bfv11_thermostat
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
          inactive: var(--lcars-alert-white)
      attribute: current_temperature
      _min: 0
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: bfv11
    show_state: true
    show_units: true
    numeric_precision: 1
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: climate.bfv12_thermostat
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
          inactive: var(--lcars-alert-white)
      attribute: current_temperature
      _min: 0
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: bfv12
    show_state: true
    show_units: true
    numeric_precision: 1
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: climate.bfv13_thermostat
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _min: 0
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
          inactive: var(--lcars-alert-white)
      attribute: current_temperature
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: bfv13
    show_state: true
    show_units: true
    numeric_precision: 1
  - type: custom:cb-lcars-multimeter-card
    template:
      - cb-lcars-animate-press
    enable_resize_observer: true
    face: picard
    variables:
      entity_match_header: false
      entity_match_slider: false
      entity_match_gauge: false
      entity_match_slider_start: false
      entity_match_slider_end: false
      _mode: gauge
      _vertical: false
      _slider_mode: brightness
      gauge:
        sub_meter:
          show_sub_meter: true
          active: var(--lcars-almond)
        range:
          enabled: true
        ranges:
          - from: 25
            to: 50
            color: rgba(0, 112, 183, 0.5)
          - from: 50
            to: 75
            color: rgba(0, 128, 0, 0.5)
          - from: 75
            to: 100
            color: rgba(255, 204, 0, 0.5)
          - from: 100
            to: 140
            color: rgba(204, 0, 0, 0.5)
        color:
          active: var(--lcars-almond)
          background:
            inactive: var(--lcars-alt-dark-gray)
        label: {}
      slider_track:
        bar_thickness: 10
        gap: 5
        bar_border_radius: 0
      animation:
        geo_array:
          animation_axis: col
          grid:
            num_cols: 3
            num_rows: 1
      entity: climate.bfv14_thermostat
      text:
        state:
          font_size: "16"
          font_family: Antonio
          padding:
            right: 100
        name:
          justify: flex-start
          padding:
            left: 10
          color: {}
      _min: 0
      _max: 140
      _show_unit_of_measurement: false
      slider:
        thumb:
          enabled: false
          height: 20
        color: var(--lcars-cornflower)
      card:
        blink:
          state_off:
            blink_seconds: 1
            blink_delay: 1
        border:
          left:
            size: 120
        color:
          unavailable: var(--lcars-alt-dark-gray)
          background: {}
          inactive: var(--lcars-alert-white)
      attribute: current_temperature
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: none
    show_label: false
    show_advanced: true
    show_name: true
    name: bfv14
    show_state: true
    show_units: true
    numeric_precision: 1

[snootched]

No problem! The image came through fine. For the code, can you edit the post and put 3 back-ticks before and after? and it will format it properly. It lost all formatting this way unfortunately.

[rusvasul]

ok, I have it in a code block, didn't realize it needed 3 ticks.

[snootched]

Apologies for the delay. Thanks for updating the code formatting.

I'm trying to recreate the issue but am not able to. I am just testing with an input_number entity and moving it around. Whether I keep the min/max as [0, 140] or what you are testing [30,140] The slider bar is still showing the correct value.

Would it be possible for you to show a screenshot of this entity along with its attributes from the States tab in Developer Tools in your Home Assistant? It would look something like the picture below.