SliderComponent

// pass in a store for backup the value including predefined one
val valueStore = storeOf(42) // omitted in further snippets!
slider(value = valueStore) { } // no range -> lower=0, upper=100, step=1

// defining the range
slider(value = valueStore) {
    range {
        lower(-20) // could be negative
        upper(40) // could also be negative, but must be greater than lower!
        step(2) // must be positive!
    }
}

// observe sliding movement explicitly:
val currentValueStore = storeOf(0) // store the current value
slider(value = valueStore) {
    events {
        // handle changing values also during sliding movement
        currentValue handledBy currentValueStore.update
    }
}

// render a vertical slider:
slider(value = valueStore) {
     orientation { vertical } // ``horizontal`` is default
}

// change size
slider(value = valueStore) {
     size { small } // ``normal`` (default) and ``large``
}

// style slider ad hoc:
slider(value = valueStore) {
    track {
    }
    trackFilled { percent ->
        // use percent value to change style according to the progress
    }
    thumb({ percent ->
        // use percent value to change style according to the progress
    }) { state ->
        // use the whole state for creating custom content
        // imagine a sticky info box with the current value appearing only
        // if ``movementTracking`` is ``true``
    }
}

// disable slider:
slider(value = valueStore) {
     disabled(true) // could also be a ``Flow<Boolean>`` to make this dynamic.
                    // Be aware that the value is still changeable via the store!
}