Slider
This component creates a slider.
A slider should be used for getting an Int based result, where the exact value is not important as it's tedious to provide a specific value. On the other hand the slider gives a goods visual feedback to the user.
It handles:
the rendering of the slider (see
`render`method)the configuration (with sub-classes) and its DSL including special
`currentValue`event within`events`context.the state management via State
the styling via theme and ad hoc definitions offered within the slider DSL
Example usages:
// 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!
}See also
Parameters
an optional store for setting and accessing the value of the slider
Constructors
Types
Functions
Property to manage the severity value of the component.
This function manages the task to map a value of the Severity enumeration to a corresponding style defined within the SeverityStyles interface. The severity itself is taken from the severity property, so only the styling interface's implementation has to be injected: