Hello Community,
I’m currently working on a widget in MainUI and noticed that the knob of the slider element is not spanning the full width of the track as expected — like shown in the attached picture.
Even when the slider value is at 100%, the knob is still slightly smaller and doesn’t fully align with the end of the track.
Is this the intended behavior or is there a way to make the knob 100% width?
Here is my code
uid: Cell_huenew
tags:
- final
props:
parameters:
- description: Small header on top of the card
label: header
name: header
required: false
type: TEXT
groupName: header
- context: item
description: Select the switch group item (e.g., Light_Power)
label: Switch Group Item
name: SwitchGroupItem
required: false
type: TEXT
groupName: lightgroup
- context: item
description: Select the Color group item (e.g., Light_Color)
label: Color Group Item
name: ColorGroupItem
required: false
type: TEXT
groupName: lightgroup
- context: item
description: Select the Brightness group item (e.g., Light_Brightness)
label: Brightness Group Item
name: BrightnessGroupItem
required: false
type: TEXT
groupName: lightgroup
- context: item
description: Select the Color temperature group item (e.g., Light_Color)
label: Color temperature Group Item
name: ColorTemperatureGroupItem
required: false
type: TEXT
groupName: lightgroup
- context: item
description: Select the scene group item (e.g., Light_Power)
label: Scene Group Item
name: SceneGroupItem
required: false
type: TEXT
groupName: lightgroup
- description: Select the scene1 description group item (e.g., Light_Power)
label: Scene1 Description
name: Scene1Description
required: false
type: TEXT
groupName: lightgroup
- description: Select the scene1 value item (e.g., Light_Power)
label: Scene1 Value
name: Scene1Value
required: false
type: TEXT
groupName: lightgroup
- description: Select the scene2 description group item (e.g., Light_Power)
label: Scene2 Description
name: Scene2Description
required: false
type: TEXT
groupName: lightgroup
- description: Select the scene1 description group item (e.g., Light_Power)
label: Scene2 value
name: Scene2Value
required: false
type: TEXT
groupName: lightgroup
- context: item
description: Select the switch LightOne item (e.g., Light_Power)
label: Switch LightOne Item
name: SwitchLightOneItem
required: false
type: TEXT
groupName: lightone
- context: item
description: Select the Color LightOne item (e.g., Light_Color)
label: Color LightOne Item
name: ColorLightOneItem
required: false
type: TEXT
groupName: lightone
- context: item
description: Select the Brightness LightOne item (e.g., Light_Brightness)
label: Brightness LightOne Item
name: BrightnessLightOneItem
required: false
type: TEXT
groupName: lightone
- context: item
description: Select the Color temperature LightOne item (e.g., Light_Color)
label: Color temperature Light One Item
name: ColorTemperatureLightOneItem
required: false
type: TEXT
groupName: lightone
- context: item
description: Select the scene LightOne item (e.g., Light_Power)
label: Scene LightOne Item
name: SceneLightOneItem
required: false
type: TEXT
groupName: lightone
- context: item
description: Select the switch Light Two item (e.g., Light_Power)
label: Switch LightTwo Item
name: SwitchLightTwoItem
required: false
type: TEXT
groupName: lighttwo
- context: item
description: Select the Color Light two item (e.g., Light_Color)
label: Color LightTwo Item
name: ColorLightTwoItem
required: false
type: TEXT
groupName: lighttwo
- context: item
description: Select the Brightness Light two item (e.g., Light_Brightness)
label: Brightness LightTwo Item
name: BrightnessLightTwoItem
required: false
type: TEXT
groupName: lighttwo
- context: item
description: Select the Color temperature LightTwo item (e.g., Light_Color)
label: Color temperature Light Two Item
name: ColorTemperatureLightTwoItem
required: false
type: TEXT
groupName: lighttwo
- context: item
description: Select the scene LightTwo item (e.g., Light_Power)
label: Scene LightTwo Item
name: SceneLightTwoItem
required: false
type: TEXT
groupName: lighttwo
- context: item
description: Select the switch Light three item (e.g., Light_Power)
label: Switch LightThree Item
name: SwitchLightThreeItem
required: false
type: TEXT
groupName: lightthree
- description: Select the Color Light three item (e.g., Light_Color)
label: Color LightThree Item
name: ColorLightThreeItem
required: false
type: TEXT
groupName: lightthree
- context: item
description: Select the Brightness Light three item (e.g., Light_Brightness)
label: Brightness LightThree Item
name: BrightnessLightThreeItem
required: false
type: TEXT
groupName: lightthree
- context: item
description: Select the Color temperature Light three item (e.g., Light_Color)
label: Color temperature Light three Item
name: ColorTemperatureLightThreeItem
required: false
type: TEXT
groupName: lightthree
- context: item
description: Select the scene LightThree item (e.g., Light_Power)
label: Scene LightThree Item
name: SceneLightThreeItem
required: false
type: TEXT
groupName: lightthree
- context: item
description: Select the switch LightFour item (e.g., Light_Power)
label: Switch LightFour Item
name: SwitchLightFourItem
required: false
type: TEXT
groupName: lightfour
- description: Select the Color LightFour item (e.g., Light_Color)
label: Color LightFour Item
name: ColorLightFourItem
required: false
type: TEXT
groupName: lightfour
- context: item
description: Select the Brightness LightFour item (e.g., Light_Brightness)
label: Brightness LightFour Item
name: BrightnessLightFourItem
required: false
type: TEXT
groupName: lightfour
- context: item
description: Select the Color temperature Lightfour item (e.g., Light_Color)
label: Color temperature Light four Item
name: ColorTemperatureLightFourItem
required: false
type: TEXT
groupName: lightfour
- context: item
description: Select the scene LightFour item (e.g., Light_Power)
label: Scene LightFour Item
name: SceneLightFourItem
required: false
type: TEXT
groupName: lightfour
parameterGroups:
- name: header
label: Header
- name: lightgroup
label: Light Group
- name: lightone
label: Light one
- name: lighttwo
label: Light two
- name: lightthree
label: Light three
- name: lightfour
label: Light four
timestamp: Jan 1, 2025, 6:10:54 PM
component: div
config:
stylesheet: |
.card:not(.card-opened) .card-content {
width: 100% !important;
}
slots:
default:
- component: oh-context
config:
constants:
widgetID: =Number.parseInt(Math.random()*8912).toString(16).padStart(4, '0')
- component: f7-card
config:
expandable: true
style:
--f7-card-expandable-tablet-height: 80vh
--f7-card-expandable-tablet-width: 39vw
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 150px
margin-left: 5px
margin-right: 5px
margin-top: 10px
noShadow: false
padding: 0px
swipeToClose: true
slots:
default:
- component: f7-card-content
config:
style:
background-color: white
height: 100%
margin: 0 0 0 0
padding: 0 0 0 0
slots:
default:
- component: f7-row
config:
class:
- align-items-center
style:
background-color: "#f0f0f0"
flex-wrap: nowrap
font-size: 18px
font-weight: bold
height: 20px
margin: 0 0 0 0
width: 100%
slots:
default:
- component: f7-col
config:
style:
background-color: white
text-align: left
width: 80%
slots:
default:
- component: Label
config:
style:
margin-left: 20px
text: =props.header
- component: f7-col
config:
style:
width: 20%
slots:
default:
- component: oh-button
config:
class:
- cell-open-button
color: black
iconF7: expand
iconSize: 20px
style:
background-color: white
text-align: right
- component: f7-row
config:
class:
- justify-content-center
style:
font-size: 16px
margin: 0 0 0 0
padding: 0 0 0 0
slots:
default:
- component: f7-block
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.itemSwitch
class:
- card-prevent-open
- card-content-padding
outline: false
style:
background-color: white
height: 130px
margin: 0px 0px 0px 0px
padding: 0px 0px 0px 0px
width: 100%
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 80%
slots:
default:
- component: f7-row
config:
style:
background-color: white
height: 30%
width: 42%
slots:
default:
- component: Label
config:
style:
font-size: 25px
font-weight: 600
height: 20px
- component: f7-row
config:
style:
background-color: white
height: 20%
width: 200%
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.SwitchGroupItem
class:
- display-inline-block
slots:
default:
- component: f7-chip
config:
color: "=(items[props.SwitchGroupItem].state === 'ON') ? 'green' : 'red'"
style:
left: 20px
text: "=(items[props.SwitchGroupItem].state === 'ON') ? 'AN' : 'AUS'"
- component: f7-row
config:
style:
background-color: green
height: 30%
width: 100%
slots:
default:
- component: f7-col
config:
style:
background-color: white
flex-wrap: nowrap
height: 100%
width: 100%
slots:
default:
- component: oh-slider
config:
item: =props.BrightnessGroupItem
label: true
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: true
- component: f7-row
config:
style:
background-color: blue
flex-wrap: nowrap
height: 20%
width: 10em
slots:
default:
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 50%
slots:
default:
- component: f7-row
config:
style:
background-color: blue
flex-wrap: nowrap
height: 100%
width: 100%
slots:
default:
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 100%
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =props.Scene1Value
actionItem: =props.SceneGroupItem
style:
font-size: 14px
font-weight: 600
margin-left: 5px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
text: Szene 1
visible: true
- component: f7-col
config:
style:
background-color: green
flex-wrap: nowrap
height: 100%
margin: 0px 0px 0px 0px
width: 50%
slots:
default:
- component: f7-row
config:
style:
background-color: green
flex-wrap: nowrap
height: 100%
width: 100%
slots:
default:
- component: f7-col
config:
style:
background-color: white
flex-wrap: nowrap
height: 100%
width: 100%
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =props.Scene2Value
actionItem: =props.SceneGroupItem
style:
font-size: 14px
font-weight: 600
margin-left: 5px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
text: Szene 2
visible: true
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 20%
slots:
default:
- component: oh-icon
config:
height: 60%
icon: lightbulb
state: =items[props.itemSwitch].state
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
outline: false
style:
width: 100%
slots:
default:
- component: f7-list
config: {}
slots:
default:
- component: oh-toggle-item
config:
item: =props.SwitchGroupItem
title: Lichtschalter
visible: "=props.SwitchGroupItem ? true : false"
- component: oh-list-item
config:
title: Helligkeit
visible: "=props.BrightnessGroupItem ? true : false"
- component: oh-slider
config:
item: =props.BrightnessGroupItem
label: true
max: 100
min: 0
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.BrightnessGroupItem ? true : false"
- component: oh-list-item
config:
title: Farbtemperatur
visible: "=props.ColorTemperatureGroupItem ? true : false"
- component: oh-slider
config:
label: true
min: 2000
max: 6500
item: =props.ColorTemperatureGroupItem
unit: "K"
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
- component: oh-list-item
config:
title: Szenenauswahl
visible: "=props.BrightnessGroupItem ? true : false"
- component: oh-input
config:
style:
background: white
margin-left: 15px
margin-top: 20px
width: auto
type: select
variable: SelectedSceneGroupValue
visible: "=props.SceneGroupItem ? true : false"
slots:
default:
- component: option
config:
value: 1
slots:
default:
- component: Content
config:
text: Sonnenuntergang Savanne
- component: option
config:
value: 2
slots:
default:
- component: Content
config:
text: Tropendämmerung
- component: oh-button
config:
action: command
actionCommand: =vars.SelectedSceneGroupValue
actionItem: =props.SceneGroupItem
style:
background: white
text: Szene aktivieren
visible: "=props.SceneGroupItem ? true : false"
- component: oh-list-item
config:
title: Farbauswahl
visible: "=props.ColorGroupItem ? true : false"
- component: oh-colorpicker-item
config:
item: =props.ColorGroupItem
modules: =['hue-slider']
title: Choose Color
visible: "=props.ColorGroupItem ? true : false"
- component: f7-navbar
config:
title: Lampe 1
visible: "=props.SwitchLightOneItem ? true : false"
- component: oh-toggle-item
config:
item: =props.SwitchLightOneItem
title: Lichtschalter
visible: "=props.SwitchLightOneItem ? true : false"
- component: oh-list-item
config:
title: Helligkeit
visible: "=props.BrightnessLightOneItem ? true : false"
- component: oh-slider
config:
item: =props.BrightnessLightOneItem
label: Helligkeit
max: 100
min: 0
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.BrightnessLightOneItem ? true : false"
- component: oh-list-item
config:
title: Farbtemperatur
visible: "=props.ColorTemperatureLightOneItem ? true : false"
- component: oh-slider
config:
label: true
min: 2000
max: 6500
item: =props.ColorTemperatureLightOneItem
unit: "K"
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.ColorTemperatureLightOneItem ? true : false"
- component: oh-list-item
config:
title: Szenenauswahl
visible: "=props.SceneLightOneItem ? true : false"
- component: oh-input
config:
style:
background: white
margin-left: 15px
margin-top: 20px
width: auto
type: select
variable: SelectedSceneLightOneValue
visible: "=props.SceneLightOneItem ? true : false"
slots:
default:
- component: option
config:
value: 1
slots:
default:
- component: Content
config:
text: Sonnenuntergang Savanne
- component: option
config:
value: 2
slots:
default:
- component: Content
config:
text: Tropendämmerung
- component: oh-button
config:
action: command
actionCommand: =vars.SelectedSceneLightOneValue
actionItem: =props.SceneLightOneItem
style:
background: white
text: Szene aktivieren
visible: "=props.SceneLightOneItem ? true : false"
- component: oh-list-item
config:
title: Farbauswahl
visible: "=props.ColorLightOneItem ? true : false"
- component: oh-colorpicker-item
config:
item: =props.ColorLightOneItem
modules: =['hue-slider']
title: Choose Color
visible: "=props.ColorLightOneItem ? true : false"
- component: f7-navbar
config:
title: Lampe 2
visible: "=props.SwitchLightTwoItem ? true : false"
- component: oh-toggle-item
config:
item: =props.SwitchLightTwoItem
title: Lichtschalter
visible: "=props.SwitchLightTwoItem ? true : false"
- component: oh-list-item
config:
title: Helligkeit
visible: "=props.BrightnessLightTwoItem ? true : false"
- component: oh-slider
config:
item: =props.BrightnessLightTwoItem
label: Helligkeit
max: 100
min: 0
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.BrightnessLightTwoItem ? true : false"
- component: oh-list-item
config:
title: Farbtemperatur
visible: "=props.ColorTemperatureLightTwoItem ? true : false"
- component: oh-slider
config:
label: true
min: 2000
max: 6500
item: =props.ColorTemperatureLightTwoItem
unit: "K"
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.ColorTemperatureLightTwoItem ? true : false"
- component: oh-list-item
config:
title: Szenenauswahl
visible: "=props.BrightnessLightTwoItem ? true : false"
- component: oh-input
config:
style:
background: white
margin-left: 15px
margin-top: 20px
width: auto
type: select
variable: SelectedSceneLightTwoValue
visible: "=props.SceneLightTwoItem ? true : false"
slots:
default:
- component: option
config:
value: 1
slots:
default:
- component: Content
config:
text: Sonnenuntergang Savanne
- component: option
config:
value: 2
slots:
default:
- component: Content
config:
text: Tropendämmerung
- component: oh-button
config:
action: command
actionCommand: =vars.SelectedSceneLightTwoValue
actionItem: =props.SceneLightTwoItem
style:
background: white
text: Szene aktivieren
visible: "=props.SceneLightTwoItem ? true : false"
- component: oh-list-item
config:
title: Farbauswahl
visible: "=props.ColorLightTwoItem ? true : false"
- component: oh-colorpicker-item
config:
item: =props.ColorLightTwoItem
modules: =['hue-slider']
title: Choose Color
visible: "=props.ColorLightTwoItem ? true : false"
- component: f7-navbar
config:
title: Lampe 3
visible: "=props.SwitchLightThreeItem ? true : false"
- component: oh-toggle-item
config:
item: =props.SwitchLightThreeItem
title: Lichtschalter
visible: "=props.SwitchLightThreeItem ? true : false"
- component: oh-list-item
config:
title: Helligkeit
visible: "=props.BrightnessLightThreeItem ? true : false"
- component: oh-slider
config:
item: =props.BrightnessLightThreeItem
label: Helligkeit
max: 100
min: 0
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.BrightnessLightThreeItem ? true : false"
- component: oh-list-item
config:
title: Farbtemperatur
visible: "=props.ColorTemperatureLightThreeItem ? true : false"
- component: oh-slider
config:
label: true
min: 2000
max: 6500
item: =props.ColorTemperatureLightThreeItem
unit: "K"
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.ColorTemperatureLightThreeItem ? true : false"
- component: oh-list-item
config:
title: Szenenauswahl
visible: "=props.BrightnessLightThreeItem ? true : false"
- component: oh-input
config:
style:
background: white
margin-left: 15px
margin-top: 20px
width: auto
type: select
variable: SelectedSceneLightThreeValue
visible: "=props.SceneLightThreeItem ? true : false"
slots:
default:
- component: option
config:
value: 1
slots:
default:
- component: Content
config:
text: Sonnenuntergang Savanne
- component: option
config:
value: 2
slots:
default:
- component: Content
config:
text: Tropendämmerung
- component: oh-button
config:
action: command
actionCommand: =vars.SelectedSceneLightThreeValue
actionItem: =props.SceneLightThreeItem
style:
background: white
text: Szene aktivieren
visible: "=props.SceneLightThreeItem ? true : false"
- component: oh-list-item
config:
title: Farbauswahl
visible: "=props.ColorLightThreeItem ? true : false"
- component: oh-colorpicker-item
config:
item: =props.ColorLightThreeItem
modules: =['hue-slider']
title: Choose Color
visible: "=props.ColorLightThreeItem ? true : false"
- component: f7-navbar
config:
title: Lampe 4
visible: "=props.SwitchLightFourItem ? true : false"
- component: oh-toggle-item
config:
item: =props.SwitchLightFourItem
title: Lichtschalter
visible: "=props.SwitchLightFourItem ? true : false"
- component: oh-list-item
config:
title: Helligkeit
visible: "=props.BrightnessLightFourItem ? true : false"
- component: oh-slider
config:
item: =props.BrightnessLightFourItem
label: Helligkeit
max: 100
min: 0
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.BrightnessLightFourItem ? true : false"
- component: oh-list-item
config:
title: Farbtemperatur
visible: "=props.ColorTemperatureLightFourItem ? true : false"
- component: oh-slider
config:
label: true
min: 2000
max: 6500
item: =props.ColorTemperatureLightFourItem
unit: "K"
step: 1
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
left: 20px
width: calc(100% - 40px)
visible: "=props.ColorTemperatureLightFourItem ? true : false"
- component: oh-list-item
config:
title: Szenenauswahl
visible: "=props.BrightnessLightFourItem ? true : false"
- component: oh-input
config:
style:
background: white
margin-left: 15px
margin-top: 20px
width: auto
type: select
variable: SelectedSceneLightFourValue
visible: "=props.SceneLightFourItem ? true : false"
slots:
default:
- component: option
config:
value: 1
slots:
default:
- component: Content
config:
text: Sonnenuntergang Savanne
- component: option
config:
value: 2
slots:
default:
- component: Content
config:
text: Tropendämmerung
- component: oh-button
config:
action: command
actionCommand: =vars.SelectedSceneLightFourValue
actionItem: =props.SceneLightFourItem
style:
background: white
text: Szene aktivieren
visible: "=props.SceneLightFourItem ? true : false"
- component: oh-list-item
config:
title: Farbauswahl
visible: "=props.ColorLightFourItem ? true : false"
- component: oh-colorpicker-item
config:
item: =props.ColorLightFourItem
modules: =['hue-slider']
title: Choose Color
visible: "=props.ColorLightFourItem ? true : false"
- component: oh-button
config:
class:
- card-opened-fade-in
- cell-close-button
- card-close
color: black
iconF7: xmark_circle_fill
iconSize: 30px
style:
top: 20px
I’ve tried adjusting the layout and CSS properties, but I couldn’t get it to fit perfectly.
Any advice or pointers would be highly appreciated!
Thank you!
