Vertical oh-slider-item

[jabra_the_hut (Oliver)]

Hi,

I try to create a slider item to control a group of blinds. It shall offer 3 ticks only (blinds open, 20% open, closed).
With the code below I am having 2 issues:
The vertical property does not seem to work. It expects a Decimal type but I have no idea what to enter there. As soon as there is a value neq 0 the slider disappears. And a strange white dot appears on my overview page inside the cell. No idea where it comes from.

Appreciate your support!

Here is the code to the full page:

config:
  label: Overview
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: oh-slider-item
                config:
                  min: 1
                  max: 3
                  item: testItem2
                  title: Jalousiegruppe
                  subtitle: Nord
                  icon: rollershutter
                  vertical: 90
                  scale: false
                  releaseOnly: true
                  scaleSteps: 2
                  label: false
                  style:
                    --f7-range-bar-size: 52px
                    --f7-range-bar-border-radius: 10px
                    --f7-range-knob-size: 0px
                    --f7-range-bar-active-bg-color: rgba(70, 155, 245, 96)
masonry: null
grid: null
canvas: null

Strange white dot and where the heck is my bar?

vertical removed. Bar appears but horizontally.

[jabra_the_hut (Oliver)]

Um, never mind. I think I still have to learn some basic concepts. I played around with the “masonry” section and added a oh-slider-card there with the following code and it suits my current needs.

masonry:
  - component: oh-masonry
    slots:
      default:
        - component: oh-slider-card
          config:
            item: testItem2
            title: Jalousiegruppe Nord
            min: 1
            max: 3
            step: 1
            vertical: 90
            scaleSteps: 2
            releaseOnly: true
            style:
              --f7-range-bar-active-bg-color: rgba(199, 199, 199)
              --f7-range-bar-bg-color: rgb(70, 155, 245, 96)
              --f7-range-bar-border-radius: 10px
              --f7-range-bar-size: 52px
              --f7-range-knob-size: 0px