Slider Widget

### Standard Numerical Inputs

The number input is just the bootstrap default:

The range input has some styling optimization for touch devices:

### Slider Widget

In many cases you'd like to give especially the touchscreen user a combination of these input elements, and as sliding may be too imprecise you also need large buttons for single step changes. That's what the slider widget does. It also adds the option of a checkbox and a default value to reflect if the user control shall be applied.

Sliders can easily be created from minimal markup using the `.slider()` plugin, with configuration given by data attributes and/or dynamic options:

…and slider state, limits and value can be controlled using the same method:

If you need even more control, you can create the slider markup yourself as well:

%

Events & values:

Checkbox, buttons and unit are optional. You can reduce the widget to just a number or just a range input, the input then needs to have the `slider-input` class.

The checkbox element defines the default value to be set on unchecking in `data-default`. By default, the checkbox will restore the previous user value when re-checked, to disable this, set `data-reset` to "true". To reset the value to the default from a script, call the `.slider()` method with `value: null` (this resets both the actual and the stored user value).

Values and checkbox status need to be consistent on init, or be set by your script. To hook into value changes, attach event handlers to events `input` and/or `change` as usual. Read the `checked` property to get the checkbox state.