Sliders
Sliders allow users to select a single value or multiple values from a defined range.
Indeterminate Example
When to Use
- Use an indeterminate slider for subjective settings that focus on intensity rather than a specific value. For example, volume settings or screen brightness.
Variations
- Indeterminate Slider Example (shown above)
- Alternate Indeterminate Slider Example
- Single Value Text Input Example
- Single Integrated Value Example
- Multiple Value Slider
- Alternate Multiple Value Slider
- Multiple Range Slider Example
Usage
- The lowest value occurs on the left. Greater values progress to the right.
- Labels appear clearly above sliders. Accompanying form fields appear below.
- The slider mechanism and the value displayed in any corresponding input field/s always adjusts interdependently.
Variations
Alternate Indeterminate Slider
When to Use
- Use the alternate indeterminate slider when there are multiple sliders on a screen or panel and/or when there is no need to give visual prominence a slider.
Single Value Text Input Slider Example
A variation of a single input slide, this version allows the user to either enter a value into a text input field, or use the knob to adjust the value. When the user selects the slider control the form field dynamically adjusts in sync with the slider.
When to Use
- Use a single value slider to allow users to specify a single value within a defined range.
Single Integrated Value Example
An integrated slider displays the value of the slider within the slider mechanism itself. This version is preferred in touch contexts. It can also be used when there is limited space and the value itself is not a large number.
When to Use
- Use this version when a specific numeric value is being selected and the when the user may prefer to type in a value.
Multiple Values Slider
When to Use
- Use a dual slider to allow the user to select a specific range from a predetermined set of numerical values.
- Use this version when the user is selecting a lower and upper value to define a range.
Alternate Multiple Values Slider Example
Multiple Range Slider Example
When to Use
- Use a multiple range slider to select two sequential ranges within a specific range of values.
Developer Notes
Indeterminate Slider
Option 1
Option 2
Order Matters:
The <input> element must be before the controls, otherwise the disabled state will not work properly. Setting min and max on the <input> element will set the boundaries for the slider values. step will force the slider to move in increments.
Callback Functions:
- Two provided callback function:
onChangeandonWillChange. - Callback functions can be configured by parameters in constructor:
var sliderInstand = new Spark.Slider(el, {onChange: function(){...}, onWillChange:function(){...}}). onChangewill trigger once when finish moving the slider or change the value of input. Arguments ofonChangewill be instance of the slider and current value.onWillChangewill trigger when moving the slider or change the value of input. Arguments ofonWillChangewill be instance of the slider and current value.onWillChangecan have a number return value which will directly set the value of slider afteronWillChangetrigger.
Single Value Slider
Option 1
Option 2
Order Matters
The <input> element must be before the controls, otherwise the disabled state will not work properly. Setting min and max on the <input> element will set the boundaries for the slider values. step will force the slider to move in increments.
Values greater than 1,000 will be truncated to something like “1k”, but integrated sliders should not be used with numerical values in excess of 3 digits due to space constraints. If you use an integrated slider for large values, don’t expect precise results.
Callback Functions:
- Two provided callback function:
onChangeandonWillChange. - Callback functions can be configured by parameters in constructor:
var sliderInstand = new Spark.Slider(el, {onChange: function(){...}, onWillChange:function(){...}}). onChangewill trigger once when finish moving the slider or change the value of input. Arguments ofonChangewill be instance of the slider and current value.onWillChangewill trigger when moving the slider or change the value of input. Arguments ofonWillChangewill be instance of the slider and current value.onWillChangecan have a number return value which will directly set the value of slider afteronWillChangetrigger.
Multiple Values Slider
Option 1
Option 2
Order Matters
The <input> elements must be before the controls, otherwise the disabled state will not work properly. Setting min and max on the <input> element will set the boundaries for the slider values. These values can be different for each<input>. The order of the <input> elements corresponds to the order of the handles, so the first <input> will be tied to the first element with a class of .spark-slider__handle. step will force the slider to move in increments.
Callback Functions:
- Two provided callback function:
onChangeandonWillChange. - Callback functions can be configured by parameters in constructor:
var sliderInstand = new Spark.RangeSlider(el, {onChange: function(){...}, onWillChange:function(){...}}). onChangewill trigger once when finish moving the slider or change the value of input. Arguments ofonChangewill be instance of the slider, index of current node and the value of that.onWillChangewill trigger when moving the slider or change the value of input. Arguments ofonWillChangewill be instance of the slider, index of current node and the value of that.onWillChangecan have a number return value which will directly set the value of slider afteronWillChangetrigger.