I’m creating a custom widget with an oh-slider component that displays correctly but cannot be moved/interacted with. The slider appears with the correct styling and current value, but dragging the knob or clicking on the track does nothing.
Widget Configuration:
- component: oh-slider
config:
item: =props.dimmer_item
min: 0
max: 100
style:
--f7-range-bar-size: 6px
--f7-range-bar-border-radius: 3px
--f7-range-knob-size: 24px
--f7-range-active-color: orange
width: 150px
What I’ve tried:
- Removing fixed width from the slider
- Wrapping in a container div
- Adding step, scale, and other properties
- Different CSS variable approaches
- Using --f7-range-size instead of width
- Verifying the item is writable (it is - other controls work on the same item)
Context:
· The slider is inside an expandable card widget
· Other interactive elements (buttons, toggle) in the same widget work fine
· The item updates correctly when changed from other controls
· The slider shows the current value correctly
· Only the interactivity is missing
Complete yaml:
uid: wohnen_modern_glass_v3
tags:
- light
- dimmer
- scene
props:
parameters:
- description: Widget Title
name: title
required: true
type: TEXT
- context: item
description: Light Switch Item
label: Light Item
name: light_item
required: true
type: TEXT
- context: item
description: Dimmer Item
label: Dimmer Item
name: dimmer_item
required: true
type: TEXT
- context: item
description: Scene 1 Item
label: Scene 1 Item
name: scene1_item
required: false
type: TEXT
- context: item
description: Scene 2 Item
label: Scene 2 Item
name: scene2_item
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 23, 2026, 10:23:09 AM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
noShadow: false
class:
- card-expandable-animate-width
style:
max-height: 150px
min-width: 300px
margin: 5px
background: linear-gradient(145deg, #ffffff, #f5f7fa)
border: none
border-radius: 25px
box-shadow: 0px 10px 30px rgba(0,0,0,0.08)
slots:
default:
- component: oh-button
config:
iconF7: gear
iconSize: 25px
color: "#2c3e50"
style:
position: absolute
top: 0
right: 0
padding-top: 15px
padding-bottom: 65px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- component: f7-card-content
slots:
default:
- component: oh-button
config:
iconF7: xmark_circle_fill
iconSize: 25px
color: "#2c3e50"
style:
position: absolute
top: 0
right: 0
padding-top: 15px
padding-bottom: 65px
z-index: 999
class:
- card-opened-fade-in
- cell-close-button
- card-close
- component: f7-block
config:
class:
- no-padding
- card-prevent-open
style:
margin: 0px
height: 135px
slots:
default:
- component: f7-row
config:
style:
padding: 12px 16px
height: 100%
slots:
default:
- component: f7-col
config:
style:
width: 25%
slots:
default:
- component: oh-button
config:
iconF7: lightbulb_fill
iconSize: 65px
color: white
iconColor: "=items[props.light_item].state == 'ON' ? 'orange' : '#95a5a6'"
action: toggle
actionItem: =props.light_item
actionCommand: ON
actionCommandAlt: OFF
class:
- card-prevent-open
style:
padding-top: 15px
height: 85px
- component: f7-col
config:
style:
width: 75%
display: flex
flex-direction: column
justify-content: space-between
slots:
default:
- component: Label
config:
text: "=props.title ? props.title : 'Light Control'"
class:
- card-prevent-open
style:
padding-left: 5px
font-size: 28px
font-weight: 800
color: "#2c3e50"
- component: Label
config:
text: "=items[props.light_item].state == 'ON' ? 'Eingeschalten' : 'Ausgeschalten'"
class:
- card-prevent-open
style:
padding-left: 5px
font-size: 14px
color: "#95a5a6"
font-weight: 600
- component: oh-slider
config:
item: =props.dimmer_item
min: 0
max: 100
color: orange
class:
- card-prevent-open
style:
--f7-range-bar-height: 6px
--f7-range-knob-size: 16px
--f7-range-bar-active-bg-color: orange
width: 100%
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
text: SZENE 1
action: command
actionItem: =props.scene1_item
actionCommand: ON
outline: true
class:
- card-prevent-open
style:
color: "#2c3e50"
border-color: "#e0e0e0"
border-radius: 10px
font-size: 11px
font-weight: 800
height: 2.2em
width: 100%
- component: f7-col
slots:
default:
- component: oh-button
config:
text: SZENE 2
action: command
actionItem: =props.scene2_item
actionCommand: ON
outline: true
class:
- card-prevent-open
style:
color: "#2c3e50"
border-color: "#e0e0e0"
border-radius: 10px
font-size: 11px
font-weight: 800
height: 2.2em
width: 100%
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
slots:
default:
- component: f7-row
config:
style:
flex-direction: column
padding: 20px
slots:
default:
- component: f7-block
config:
style:
margin-bottom: 30px
slots:
default:
- component: span
config:
content: "=props.title"
style:
font-size: 32px
font-weight: 800
color: "#2c3e50"
- component: span
config:
content: Settings
style:
display: block
font-size: 14px
text-transform: uppercase
color: "#95a5a6"
font-weight: 700
margin-top: 5px
- component: f7-block
config:
style:
display: flex
align-items: center
justify-content: space-between
width: 100%
padding: 16px 0
border-bottom: 1px solid rgba(0,0,0,0.1)
slots:
default:
- component: f7-block
config:
style:
display: flex
align-items: center
slots:
default:
- component: f7-icon
config:
f7: bolt_fill
size: 24
style:
color: orange
margin-right: 12px
- component: span
config:
content: Power
style:
font-weight: 600
font-size: 16px
color: "#2c3e50"
- component: oh-toggle
config:
item: =props.light_item
style:
--f7-toggle-width: 50px
--f7-toggle-height: 30px
--f7-toggle-handle-size: 26px
--f7-toggle-active-color: orange
- component: f7-block
config:
style:
display: flex
align-items: center
justify-content: space-between
width: 100%
padding: 16px 0
slots:
default:
- component: f7-block
config:
style:
display: flex
align-items: center
slots:
default:
- component: f7-icon
config:
f7: sun_max_fill
size: 24
style:
color: orange
margin-right: 12px
- component: span
config:
content: Brightness
style:
font-weight: 600
font-size: 16px
color: "#2c3e50"
- component: oh-slider
config:
item: =props.dimmer_item
min: 0
max: 100
style:
--f7-range-bar-size: 6px
--f7-range-bar-border-radius: 3px
--f7-range-knob-size: 24px
--f7-range-active-color: orange
width: 150px
- component: f7-row
config:
style:
margin-top: 30px
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
text: SZENE 1
action: command
actionItem: =props.scene1_item
actionCommand: ON
fill: true
color: orange
style:
border-radius: 10px
font-size: 14px
font-weight: 800
height: 3em
width: 100%
- component: f7-col
slots:
default:
- component: oh-button
config:
text: SZENE 2
action: command
actionItem: =props.scene2_item
actionCommand: ON
fill: true
color: orange
style:
border-radius: 10px
font-size: 14px
font-weight: 800
height: 3em
width: 100%
margin-left: 10px
