Overview
Properties
Non-linear ranges
Showing scale
Format number
Client Events
- Parameters of callback function
- List of events

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 #

name	type	default	description
name	string		Name of widget, this is required.
handles	number	1	The number of handles you want to have in slider
range	array		Ranges of the sliders
step	number		The step on your slider
rtl	bool	false	Set to `true` if you want right to left direction
vertical	bool	false	Set to `true` you make the slider vertical
connect	bool	true	By default, the handles are connected together
scale	number		Show the scale/ruler, and the number put into scale is the density
length	string		The length of range slider
format	array		Here 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:

name	type	description
`values`	array	Current slider values
`handle`	number	Handle that caused the event
`unencoded`	array	Slider values without formatting
`tap`	bool	Event was caused by the user tapping the slider
`positions`	array	Left offset of the handles

List of events #

name	description
`update`	Use 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.
`slide`	This 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.
`set`	Whenever 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'.
`change`	This 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'.
`start`	This event fires when a handle is clicked (mousedown, or the equivalent touch events).
`end`	This 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).

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.