rangeSlider

This is a range slider input field.

Please note, this field depend on the following library:

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

{
type: "rangeSlider",
label: "Rank",
model: "rank",
min: 1,
max: 10,
required: true,
rangeSliderOptions: {
grid: true
},
validator: validators.integer
}

In this example the value will be a Number like this:

rank: 6

Double range slider

{
type: "rangeSlider",
label: "Income",
model: "income",
min: 0,
max: 100000,
rangeSliderOptions: {
type: "double",
prefix: "$",
step: 1000
}
}

In this example the value will be an array of numbers:

income: [5000, 9000]