Frontfire documentation

Slider plugin

Version 2.1.0

Frontfire UI provides a value selection control that shows the selected value on a bar and allows dragging it to change the value.

This plugin is only available in the Complete bundle.

Description

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.

To create a slider control, define a <div class="slider"> element with the desired options. The slider control is focusable and the current value can be changed with the arrow keys when it has the focus.

Add the slider CSS class to an element, or call the slider() plugin method on it, to create the slider.

The sizes and colours of the slider components can be customised with the CSS variables that start with “--slider-”.

Basic slider

Sliders can be placed in horizontal (default) and vertical orientation. The dimensions can be set through the usual CSS attributes. As a block element, the slider will use the entire available width. For vertical sliders, the height must be set explicitly, if not determined by the parent layout (like stretched flex items).

Note that the ticks and labels are always placed outside of the slider core element and additional margin space needs to be reserved for them. For horizontal sliders, 1em is usually sufficient, for vertical sliders it depends on the length of the labels.

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 method.

   

Using 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

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:

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.

Options

The following options are available:

Name Type Description Default
dragCursor String The mouse cursor to show during dragging the slider. None
handleCount Number The number of slider handles. 1
handleInteractionMode String How multiple handles interact with each other while dragging.
  • “locked”: A handle cannot be moved over another handle and is restricted to the range up to it.
  • “push”: When a handle is moved over another handle, both are pushed in the same direction (but not pulled back again).
  • “free”: All handles can be moved to arbitrary values, also changing their order.
 "locked"
hideWrapping Boolean Hide ranges when the end is less than the start. false
largeStep Number The large step of the slider. 10
largeTickLabels Boolean Indicates whether the large step ticks have their value as label. true
largeTicks Boolean Indicates whether the large step ticks are visible. true
max Number The maximum value of the slider range. 100
min Number The minimum value of the slider range. 0
orientation String The orientation of the slider, either “h” (horizontal) or “v” (vertical). "h"
rangeBase Number The base value of the range rectangle (“min” or “max” for the corresponding option values, i.e. the start or end of the slider range; or any number e.g. 0). 0
rangeOverflowEqual Boolean Overflow the range if the two handles have the same value. false
ranges Object array Individual ranges along the slider. Overrides the rangeBase option and two-handle range behaviour. Each range object in this array has the properties:
  • start: The start value of the range (see below).
  • end: The end value of the range (see below).
  • overflowEqual: Overflow the range if the start and end have the same value. (Default: false) The range also always overflows if the handles are reversed.
  • color: The fill colour of the range on the slider.
  • className: A CSS class name to be set on the range element. Multiple class names can be specified as space-separated string, array (iterable), or any combination thereof.
The start and end values can be numbers, the strings “min”/“max” for the corresponding option values, i.e. the start or end of the slider range, or zero-based handle references prefixed with “#”, e.g. “#2” for the current value of the third handle. This option can be set in data-opt attributes using strict JSON syntax (quoted property names, double quotes). 		None
smallStep Number The small step of the slider. 1
smallTickLabels Boolean Indicates whether the small step ticks have their value as label. false
smallTicks Boolean Indicates whether the small step ticks are visible. false
tickPlacement String The location of the tick marks in the slider (“topleft”, “bottomright”, “both”, “none”). "topleft"
value Number The initial value of the slider. 0
values Number array The initial values of the slider. Overrides the single value option. This option can be set in data-opt attributes using strict JSON syntax. None

Plugin methods

This plugin provides methods to control the slider.

multivalue

Gets or sets the current value of the specified slider handle.

Plugin properties

This plugin provides properties to access the slider state.

value

Gets or sets the current slider value. If there are multiple handles, the value of the first handle is returned or set.

Plugin events

This plugin triggers events for the slider.

firstdragstart

Triggered when the first handle is starting to be dragged.

lastdragend

Triggered when the last handle drag operation has ended.

change

Triggered when the selection value of a handle has changed. The following properties are provided with the event: