RangeSlider

Overview #

RangeSlider is a nice control to set the range of numeric values or datetime. Just have a look at original range slider. To use the RangeSlider widget in KoolReport, you do:

RangeSlider::create(array(
    "name"=>"myRangeSlider",
    "handles"=>1,
    "length"=>"200px",
    "ranges"=>array(
        "min"=>0,
        "max"=>100,
    ),
    "step"=>10,
));

Properties #

nametypedefaultdescription
namestringName of widget, this is required.
handlesnumber1The number of handles you want to have in slider
rangesarrayRanges of the sliders
stepnumberThe step on your slider
rtlboolfalseSet to true if you want right to left direction
verticalboolfalseSet to true you make the slider vertical
connectbooltrueBy default, the handles are connected together
scalenumberShow the scale/ruler, and the number put into scale is the density
lengthstringThe length of range slider
formatarrayHere you can insert format for number, it is associate array of decimals,prefix and suffix. You may see below example for more details

Non-linear ranges #

You may set the non-linear ranges base on percentage

RangeSlider::create(array(
    "name"=>"myRangeSlider",
    "handles"=>1,
    "length"=>"200px",
    "ranges"=>array(
        "min"=>0,
        "10%"=>500,
        "50%"=>4000,
        "max"=>10000,
    ),
    "step"=>10,
));

Showing scale #

RangeSlider::create(array(
    "name"=>"myRangeSlider",
    "handles"=>1,
    "length"=>"200px",
    "ranges"=>array(
        "min"=>0,
        "max"=>100,
    ),
    "scale"=>3,
    "step"=>10,
));

Format number #

RangeSlider::create(array(
    ...
    "format"=>array(
        "prefix"=>"$",
        "decimals"=>2,
    )
));