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",
    "range"=>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
rangearrayRanges 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",
    "range"=>array(
        "min"=>0,
        "10%"=>500,
        "50%"=>4000,
        "max"=>10000,
    ),
    "step"=>10,
));

Showing scale #

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

Format number #

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

Client Events #

The RangeSlider support client events. Below event will show the values in console log whenever user drag the handler.

<?php
\koolreport\inputs\RangeSlider::create(array(
    ..
    "clientEvents"=>array(
        "update"=>"function(values, handle, unencoded, tap, positions){
            console.log(values);
        }"
    )
));
?>

Parameters of callback function #

The handle function of all RangeSlider's events receive 4 parameters:

nametypedescription
valuesarrayCurrent slider values
handlenumberHandle that caused the event
unencodedarraySlider values without formatting
tapboolEvent was caused by the user tapping the slider
positionsarrayLeft offset of the handles

List of events #

namedescription
updateUse this event when synchronizing the slider value to another element, such as an <input>. It fires every time the slider values are changed, either by a user or by calling API methods. Additionally, it fires immediately when bound. In most cases, this event should be more convenient than the 'slide' event.
slideThis event is useful when you specifically want to listen to a handle being dragged, but want to ignore other updates to the slider value. This event also fires on a change by a 'tap'. In most cases, the 'update' is the better choice.
setWhenever a slider is changed to a new value, this event is fired. This function will trigger every time a slider stops changing, including after calls to the .set() method. You can consider this 'end of slide'.
changeThis event is similar to the 'change' events on regular <input> elements. It fires when a user stops sliding, or when a slider value is changed by 'tap'.
startThis event fires when a handle is clicked (mousedown, or the equivalent touch events).
endThis event is the opposite of the 'start' event. If fires when a handle is released (mouseup etc), or when a slide is canceled due to other reasons (such as mouse cursor leaving the browser window).