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
Plugin URI: https://cdn.altersoftware.org/js-as-form/plugin/as-form-slider.js
Plugin name: slider
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:
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:
label (String, mandatory): the name of the interval, shown in the reportcolor (CSS color string): interval color in whatever CSS format (hex, hex8, rgb, rgba), defaults to rgba(128,128,128,0)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:
position (String, top or bottom): the position of the report, default: bottomlabel (String): fixed literal leading text in the reportintervals (Boolean): if true shows the name of the current interval label (if any)relvalue (Boolean): if true shows the value selected within the current interval (if any)value (Boolean): if true shows the overall value selected on the sliderpercent (Boolean): if true shows the percentage of the overall value selected on the sliderreport: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:
color (CSS color string): color in whatever CSS format (hex, hex8, rgb, rgba)step (Integer): A 0-100 integer that becomes the % value of the color stepFollows CSS rules of linear-gradient, e.g.:
color-only steps generate a linear linear-gradientcolor and step indicates the position of the colorstep-only object in the middle of two colors represents the middle of gradient between the two colorscolor and the same step make a hard color breakEnsure that objects are listed in the array in increasing order of step, if any.
Slider field type provides a few additiona methods:
aField.hideField()Hides the numeric field above the slider.
aField.hideSlider()Hides the slider.
aField.showField()Shows the numeric field above the slider.
aField.showSlider()Shows the slider.