:: libs :: js-as-form :: as-form-slider

Library index

Plugin: “as-form-slider”

Builds a slider to collect an integer value, with many options.

Developed and maintained by balestra

Licensed under Creative Commons Attribution 4.0 License for free personal/professional/commercial use, with attribution.

Version 1.1, released on 2020-11-24


Fields of type slider

Load plugin

Plugin URI: https://cdn.altersoftware.org/js-as-form/plugin/as-form-slider.js

Plugin name: slider


asForm.addField( fieldname, 'slider', {options…} )

Generates a clickable and draggable slider to set an integer.

All options are optional.

Common option keys can be used, in addition:


If true an input field with the numeric value is shown above the slider.

There are also the field methods asField.showField() and asField.hideField() to change this choice dynamically.


If true the input field (if shown above the slider) can be used to set the value.


If activated shows a gradient in the slider area.

Can be boolean true or a string (CSS gradient declaration, e.g.: linear-gradient(to right, …, …))

If true builds the gradient:

  1. From color steps, if defined, otherwise
  2. From the colors of the intervals list, otherwise
  3. Automatically, linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.3))


If activated shows a gradient in the slider area only during drag action.

Doesn’t make sense if gradient is set.

Follows the same rules as gradient


A list (array) of the intervals of values.

Each interval is on object, with keys:


The integer maximum value of the field.

Calculated automatically if list defines the sets of values, defaults to 100.


The integer minimum value of the field.

Calculated automatically if list defines the sets of values, defaults to 0.


If activated reports current slider position information.

Can be a boolean true or an object, object keys can be:

report:true means: report:{ position:'bottom', intervals:true, percent:true }


Boolean: show a mark on the slider for initial value, defaults to true.


Boolean: show a button to reset slider to initial value, defaults to true.


The set of color steps to be used in the to right linear-gradient.

If declared overrides also the gradient colors derived from intervals, if any.

It’a an array of objects, each object must use at least one of these keys:

Follows CSS rules of linear-gradient, e.g.:

Ensure that objects are listed in the array in increasing order of step, if any.

Additional methods

Slider field type provides a few additiona methods:


Hides the numeric field above the slider.


Hides the slider.


Shows the numeric field above the slider.


Shows the slider.

Version history