@Aaron2 Great widget! I made a vertical version and used F7 Typography to scale nicely. Here is my code.
uid: Slider_Vertical_Widget
tags: []
props:
parameters:
- context: item
description: An item to control
label: Item
name: dimmerItem
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 31, 2020, 2:33:09 AM
component: f7-card
config:
class:
- padding
- margin
slots:
default:
- component: f7-row
config:
class:
- display-flex
- flex-direction-row
- justify-content-space-between
- align-items-center
- padding
slots:
default:
- component: Label
config:
text: '=(props.dimmerItem) ? props.dimmerItem : "Set dimmer"'
- component: oh-toggle
config:
item: =props.dimmerItem
- component: f7-row
config:
class:
- display-flex
- flex-direction-row
- justify-content-flex-start
- align-items-flex-start
slots:
default:
- component: f7-col
slots:
default:
- component: f7-row
config:
class:
- display-flex
- flex-direction-row
- justify-content-flex-start
- align-items-flex-start
slots:
default:
- component: f7-icon
config:
f7: rays
class:
- padding-horizontal
- component: Label
config:
text: =items[props.dimmerItem].displayState || items[props.dimmerItem].state
- component: oh-slider
config:
item: =props.dimmerItem
vertical: true
scale: true
max: 100
min: 0
class:
- padding
- margin
style:
height: 200px