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.
keyboard
false
Boolean
Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
keyboard_step
5
Number
Movement step, than controling from keyboard. In percents.
grid
false
Boolean
Enables grid of values.
grid_margin
true
Boolean
Set left and right grid borders.
grid_num
4
Number
Number of grid units.
grid_snap
false
Boolean
Snap grid to sliders step (step param). If activated, grid_num will not be used.
hide_min_max
false
Boolean
Hides min and max labels
hide_from_to
false
Boolean
Hide from and to lables
prefix
none
String
Set prefix for values. Will be set up right before the number: $100
postfix
none
String
Set postfix for values. Will be set up right after the number: 100k
max_postfix
none
String
Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+
decorate_both
true
Boolean
Used for "double" type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k
values_separator
" — "
String
Set your own separator for close values. Used for "double" type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
input_values_separator
" ; "
String
Separator for double values in input value property.
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
Copy link
Contents
Special properties of field
rangeSliderOptions
Usage