OH3 Main UI Slider style changes

Just wondering if i can change the slider styles in OH3 main ui widgets.
i have this currently

and i would like to change the style to something like the hue app
image

In habpanel OH2 i could do something similar using CSS and RZ-Sliders.

Just wondering if theres a way to do this in OH3 Main ui widgets.

For anybody looking for a solution. I have figured it out with many many searches.

The openhab components such as oh-slider are based off the Framework 7 components.
So the CSS variables in the framework 7 components work
such as

- component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class: justify-content-flex-start
                        slots:
                          default:
                            - component: oh-slider
                              config:
                                color: white
                                class: '=props.showSlider ? props.showSlider : "display-none"'
                                step: "1"
                                min: =props.minValue
                                max: =props.maxValue
                                item: "=(props.slideritem) ? props.slideritem : props.item "
                                style:
                                  margin-left: 10px
                                  width: calc(100% - 20px)
                                  --f7-range-bar-size: 18px
                                  --f7-range-bar-border-radius: 10px
                                  --f7-range-knob-size: 25px
                                  --f7-range-bar-bg-color: rgba(255,255,255,0.2)
                                  --f7-range-bar-active-bg-color: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8))
                                  --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)

6 Likes

It looks really nice.
Is it possible to share the whole code for the widget?
Just for inspiration;)

It started as another widget from someone else, i have made changes, added gradient background. changed styling and added colour options. Along with being able to set the main item, which will control all things. toggle, slider, colour and stepper.
But you can individually set each components item if you wish.
I have the toggle controlling the wall switch which turns on the light.
Then i have the slider and colour controlling those channels for the bulb itself.

uid: darkLiquid_card
tags:
  - small
  - dark
  - custom
  - liquid
props:
  parameters:
    - label: Headline text
      name: headline
      required: false
      type: TEXT
      groupName: header
    - label: Subheadline text
      name: subheadline
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Set an item which you want to control
      label: Item
      name: item
      required: false
      type: TEXT
      groupName: general
    - description: Show state of the item
      label: Show state
      name: showState
      required: false
      type: BOOLEAN
      groupName: general
    - description: The value symbol shown after the item-value
      label: Value symbol
      name: valueSymbol
      required: false
      type: TEXT
      groupName: general
    - description: valueSymbol high or low
      label: Value symbol position
      name: valueSymbolPos
      required: false
      type: BOOLEAN
      groupName: general
      advanced: true
    - description: Set the lowest value, that your item can have. (<b>default:</b> 0)
      label: Items MIN value
      name: minValue
      required: false
      type: TEXT
      groupName: general
    - description: Set the highest value, that your item can have. (<b>default:</b> 100)
      label: Items MAX value
      name: maxValue
      required: false
      type: TEXT
      groupName: general
    - description: Show trend graph instead of liquid background
      label: Trend graph
      name: showTrend
      required: false
      type: BOOLEAN
      groupName: general
    - label: Icon image url
      name: heroIcon
      required: false
      type: TEXT
      groupName: images
    - description: Activating Stepper element to control item which you selected above
      label: Show stepper buttons
      name: showStepper
      required: false
      type: BOOLEAN
      groupName: controls
    - context: item
      description: Set an item which you want to control
      label: Stepper Item
      name: stepperitem
      required: false
      type: TEXT
      groupName: controls
    - description: Activating Toggle element to control item which you selected above
      label: Show toggle
      name: showToggle
      required: false
      type: BOOLEAN
      groupName: controls
    - context: item
      description: Set an item which you want to control
      label: Toggle Item
      name: toggleitem
      required: false
      type: TEXT
      groupName: controls
    - description: Activating Slider element to control item which you selected above
      label: Show slider
      name: showSlider
      required: false
      type: BOOLEAN
      groupName: controls
    - context: item
      description: Set an item which you want to control
      label: Slider Item
      name: slideritem
      required: false
      type: TEXT
      groupName: controls
    - description: Activating Colour element to control item which you selected above
      label: Show colour
      name: showColour
      required: false
      type: BOOLEAN
      groupName: controls
    - context: item
      description: Set an item which you want to control
      label: Colour Item
      name: colouritem
      required: false
      type: TEXT
      groupName: controls
  parameterGroups:
    - name: header
      label: Header area
    - name: general
      label: General settings
      description: Most important widget settings
    - name: controls
      label: Control settings
      description: Controls to manipulate your item-state (only use one of them)
    - name: images
      label: Images
timestamp: Jan 21, 2021, 7:50:03 PM
component: f7-block
config:
  style:
    position: relative
    -ms-user-select: None
    -moz-user-select: None
    -webkit-user-select: None
    user-select: None
  class:
    - no-padding
    - no-margin
slots:
  default:
    - component: oh-image
      config:
        url: "=props.heroIcon ? props.heroIcon : ''"
        style:
          position: absolute
          top: -5px
          left: -10px
          width: 100%
          max-width: min(max(50px, 15vw), 80px)
          z-index: 99
    - component: f7-card
      config:
        outline: true
        style:
          max-height: 200px
          border-radius: 20px
          overflow: hidden
          position: relative
          background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLycUzU8qMBcjTUr6NyLvwa-zlDsycKy7Ajg&usqp=CAU')
          background-repeat: no-repeat
          background-size: 100%
          background-color: black
          background-blend-mode: lighten
      slots:
        default:
          - component: f7-card-content
            config:
              style:
                height: 100%
                display: flex
                flex-direction: column
                position: relative
                z-index: 999
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      z-index: 999
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: Label
                              config:
                                propsParameterGroup: header
                                text: '=(props.headline) ? props.headline : ""'
                                style:
                                  position: relative
                                  left: 30px
                                  white-space: nowrap
                                  text-overflow: ellipsis
                                  overflow: hidden
                                  display: block
                                  width: 80%
                                  color: rgba(255,255,255,1)
                                  letter-spacing: .75px
                                  font-size: min(max(70px, 4vw), 25px)
                                  font-weight: 600
                            - component: Label
                              config:
                                actionPropsParameterGroup: header
                                text: '=(props.subheadline) ? props.subheadline : ""'
                                style:
                                  position: relative
                                  left: 30px
                                  white-space: nowrap
                                  text-overflow: ellipsis
                                  overflow: hidden
                                  color: rgba(255,255,255,.7)
                                  letter-spacing: .75px
                                  font-size: min(max(50px, 2.5vw), 15px)
                            - component: oh-icon
                              config:
                                class: '=props.showColour ? props.showColour : "display-none"'
                                icon: colorlight
                                action: group
                                actionGroupPopupItem: "=(props.colouritem) ? props.colouritem : props.item "
                                style:
                                  height: min(max(30px, 2.5vw), 40px)
                                  position: absolute
                                  --f7-button-bg-color: ='hsl(' + items.ZigbeeTallLoungeLamp_Colour.state.split(",") [0] + ', ' + items.ZigbeeTallLoungeLamp_Colour.state.split(",") [1] + '%, 70%)'
                                  right: 20px
                                  top: 20px
                                  z-index: 999
                - component: f7-row
                  config:
                    style:
                      z-index: 999
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 100
                          class: '=props.valueSymbolPos ? props.valueSymbolPos : "align-items-flex-end"'
                          style:
                            display: flex
                            justify-content: flex-start
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=(items[props.item].displayState) ? items[props.item].displayState : items[props.item].state"
                                class: '=props.showState ? props.showState : "display-none"'
                                style:
                                  color: rgba(255,255,255,1)
                                  text-shadow: 2px 2px rgba(0,0,0,.25)
                                  font-size: 20px
                                  font-weight: 600
                            - component: Label
                              config:
                                text: =props.valueSymbol
                                style:
                                  color: rgba(255,255,255,1)
                                  text-shadow: 2px 2px rgba(0,0,0,.25)
                                  font-size: 20px
                                  font-weight: 600
                - component: f7-row
                  config:
                    style:
                      padding-top: 10px
                      padding-bottom: 10px
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class: justify-content-flex-end
                          style:
                            max-height: 28px
                            display: flex
                            padding-bottom: 8px
                        slots:
                          default:
                            - component: oh-stepper
                              config:
                                class: '=props.showStepper ? props.showStepper : "display-none"'
                                raised: true
                                buttonsOnly: true
                                small: true
                                autorepeat: true
                                min: =props.minValue
                                max: =props.maxValue
                                step: 4
                                color: white
                                style:
                                  margin-right: 20px
                                item: "=(props.stepperitem) ? props.stepperitem : props.item "
                            - component: oh-toggle
                              config:
                                color: white
                                class: '=props.showToggle ? props.showToggle : "display-none"'
                                item: "=(props.toggleitem) ? props.toggleitem : props.item "
                                style:
                                  right: 10px
                                  --f7-toggle-handle-color: rgba(255,255,255,1)
                                  --f7-toggle-inactive-color: rgba(255,255,255,0.2)
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class: justify-content-flex-start
                        slots:
                          default:
                            - component: oh-slider
                              config:
                                color: white
                                class: '=props.showSlider ? props.showSlider : "display-none"'
                                step: "1"
                                min: =props.minValue
                                max: =props.maxValue
                                item: "=(props.slideritem) ? props.slideritem : props.item "
                                style:
                                  margin-left: 10px
                                  width: calc(100% - 20px)
                                  --f7-range-bar-size: 18px
                                  --f7-range-bar-border-radius: 10px
                                  --f7-range-knob-size: 25px
                                  --f7-range-bar-bg-color: rgba(255,255,255,0.2)
                                  --f7-range-bar-active-bg-color: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8))
                                  --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                            - component: oh-trend
                              config:
                                visible: "=props.showTrend ? true : false"
                                trendItem: =props.item
                                trendGradient:
                                  - "#FFE7DD"
                                  - "#FFD1BD"
                                style:
                                  position: absolute
                                  bottom: 0
                                  left: 0
                                  width: 100%
                                  height: 100%
                                  opacity: 0.4

3 Likes

Thanks!
this is a perfect starting point without breaking the door open :slight_smile:

1 Like