rangeSlider

This is a range slider input field.

Please note, this field depend on the following library:

Special properties of field

rangeSliderOptions

For more details, see the official rangeSlider documentation.

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]

Last updated