rangeSlider

Search…
rangeSlider
This is a range slider input field.
Please note, this field depend on the following library:
​jQuery​
​ion.rangeSlider​
ion.rangeSlider.css
ion.rangeSlider.skinHTML5.css
Special properties of field
Property
Default
Accepted values
Description
autocomplete
none
​see doc​
Indicates whether the value of the control can be automatically completed by the browser.
max
100
Number
Max value (need to use validators.number)
min
10
Number
Min value (need to use validators.number)
placeholder
none
String
Placeholder text for input field
readonly
false
Boolean
If true, the input field is read only
rangeSliderOptions
{}
Object
Settings to slider. See details below.
step
1
Number
Set sliders step. Always > 0. Could be fractional.
rangeSliderOptions
For more details, see the official rangeSlider documentation.
Property
Default
Accepted values
Description
type
"single"
String
Choose slider type, could be single - for one handle, or double for two handles
from
min
Number
Set start position for left handle (or for single handle)
to
max
Number
Set start position for right handle
step
1
Number
Set sliders step. Always > 0. Could be fractional.
min_interval
none
Number
Set minimum diapason between sliders. Only in "double" type
max_interval
none
Number
Set maximum diapason between sliders. Only in "double" type
drag_interval
false
Boolean
Allow user to drag whole range. Only in "double" type (beta)
from_fixed
false
Boolean
Fix position of left (or single) handle.
from_min
min
Number
Set minimum limit for left handle.
from_max
max
Number
Set the maximum limit for left handle
from_shadow
false
Boolean
Highlight the limits for left handle
to_fixed
false
Boolean
Fix position of right handle.
to_min
min
Number
Set the minimum limit for right handle
to_max
max
Number
Set the maximum limit for right handle
to_shadow
false
Boolean
Highlight the limits for right handle
prettify_enabled
true
Boolean
Improve readability of long numbers. 10000000 → 10 000 000
prettify_separator
" "
String
Set up your own separator for long numbers. 10 000, 10.000, 10-000, etc.
prettify
null
Function
Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates.
force_edges
false
Boolean
Slider will be always inside it's container.
Usage
Simple slider with one value
1
{
2
    type: "rangeSlider",
3
    label: "Rank",
4
    model: "rank",
5
    min: 1,
6
    max: 10,
7
    required: true,
8
    rangeSliderOptions: {
9
        grid: true
10
    },
11
    validator: validators.integer
12
}
Copied!
In this example the value will be a Number like this:
1
rank: 6
Copied!
Double range slider
1
{
2
    type: "rangeSlider",
3
    label: "Income",
4
    model: "income",
5
    min: 0,
6
    max: 100000,
7
    rangeSliderOptions: {
8
        type: "double",
9
        prefix: "quot;,
10
        step: 1000
11
    }
12
}
Copied!
In this example the value will be an array of numbers:
1
income: [5000, 9000]
Copied!
selectEx
spectrum
Last modified 3yr ago
Copy link
Contents
Special properties of field
rangeSliderOptions
Usage