Slider

Sliders are a visual method to select one or more values within a valid range. They show a range, sometimes with a scale, and have a handle for the selected value. The handle can only be moved within the range, not outside of it. HTML does not offer a similar input control so this is a completely new implementation.

Configuration

As with many other Frontfire controls, options can be specified with the JavaScript function that enables the control from an HTML element. If this isn’t accessible because you’re using the built-in autostart feature, or a markup declaration is preferred over code, all options can also be specified with data-opt-... HTML attributes individually or with a data-opt attribute for all options. The option names for data attributes must be converted from camelCase to dash-case just like CSS properties are between JavaScript and CSS syntax. (Example: smallTickLabels and small-tick-labels)

Option	Type	Description	Default
`orientation`	String	The orientation of the slider. Values: h (horizontal), v (vertical)	h
`value`	Number	The initially selected slider value.	0
`min`	Number	The lower end of the selectable range.	0
`max`	Number	The upper end of the selectable range.	100
`rangeBase`	Multiple	The base value of the range rectangle. Values: min (minimum), max (maximum), any specific number	min
`largeStep`	Number	The size of a large step.	10
`smallStep`	Number	The size of a small step. This is the minimum granularity that can be set.	1
`largeTicks`	Boolean	Indicates whether ticks are displayed at the large step.	true
`smallTicks`	Boolean	Indicates whether ticks are displayed at the small step.	false
`largeTickLabels`	Boolean	Indicates whether the large step ticks have their value as label.	true
`smallTickLabels`	Boolean	Indicates whether the small step ticks have their value as label.	false
`tickPlacement`	String	The location of the tick marks in the slider. Values: topleft, bottomright, both, none	topleft

Basic slider

Sliders can be placed in horizontal (default) and vertical orientation (orientation option is “v”). The dimensions can be set through the usual CSS attributes.

Ticks and labels

There are options for different step, ticks, label and tick placement settings. The following examples show different configurations.

Also different range base settings and vertical orientation.

Get and set value

The slider value can be retrieved and set by code. This is done through a plugin extension function with a syntax similar to other jQuery functions.

Disable slider

var value = $("#slider1").slider.value(); $("#slider1").slider.value(value);

Events

The slider provides an event to notify about a changed value. This event can be blocked so that certain inacceptable values cannot be set. In the following example, high values can be blocked and the slider range colour is set through a CSS class depending on the value.

No value yet Allow high values

$("#slider2").on("valuechange", function (event) { var value = $("#slider2").slider.value(); $("#slider2").toggleClass("red", value > 60); if (value > 60 && !$("#slider2Checkbox").prop("checked")) $("#slider2").slider.value(60); });

Range gradient background

Using a CSS gradient with absolute lengths (depends on the actual slider size), also with custom content at a fixed position (at value 9) in the range element

Multiple values

A slider can also present multiple values at once. A separate handle is displayed for each value. All handles can be moved individually. There are the advanced options for multiple values:

Option	Type	Description	Default
`values`	Array	The initially selected slider values.
`handleCount`	Number	The number of slider handles.	1
`handleInteractionMode`	String	How multiple handles interact with each other while dragging. Values: locked, push, free	locked
`rangeOverflowEqual`	Boolean	Overflow the range if the two handles have the same value.	false
`ranges`	Array	Individual ranges. Overrides the rangeBase option and two-handle range behaviour. Each range object has the properties: start, end, overflowEqual, color, className. start and end can be fixed values, “min”/“max”, or zero-based handle references prefixed with “#”.

Handles locked against each other

Handles push each other

Handles free

Don’t overflow the range on equal values (default):

Overflow the range on equal values:

Vertical layout

More handles and individual ranges between them

Ranges between handles, with one overflowing from last to first handle. Use this to specify high and low error and warning thresholds.

Ranges with “min”, “max”, constant values and a handle reference (at “D”); also customised dimensions and styled handles with custom content.