How to display oh-slider-item without state text on the far right?

Add-ons UIs
1

Hello,

I try to build a light widget using the oh-slider-item. The item is great - only it displays the state once again like this:

grafik
grafik924×98 3.43 KB

I would like to work without the state text on the far right corner - I might be able to make it white or something like this, but when using the after block, this block moves.
Like this:

grafik
grafik928×91 3.49 KB

and if the light is turned off:
grafik
grafik931×87 2.41 KB

Here the widget code snippet:

    - component: oh-slider-item
      config:
        icon: oh:slider
        iconUseState: true
        item: =props.lightItem
        label: true
        scale: true
        scaleSteps: 4
        style:
          text-align: left
        title: =props.lightTitle
        visible: =props.lightItem.includes("Dimmbar")
      slots:
        after:
          - component: oh-toggle
            config:
              item: =props.lightItem

Any idea how to get this a bit nicer?

Thanks a lot.

René

2

As long as you have the item property configured for the slider, it will draw that label in the after slot. That’s just how it’s designed.

So to get rid of it you’ve really only got two choices:

  1. Instead of adding a toggle to a oh-slider-item use an oh-list-item and add both an oh-slider and an oh-toggle to it. That will give you a little be more control.
  2. Use CSS to turn of display of the label. The component configuration doesn’t give you access to the label’s style attribute so you’ll have to use the stylesheet and put is a full css declaration. Adding the following to the config of the slider item should suffice:
stylesheet: >
  .item-after > div {
    display: none;
  }
3

Sorry for the late reply!

Thanks for your answer, I will give it a try as soon as I’ve fixed my persistence.

Greetings,
René