Slider

Creates a slider with the ability to select a value using the track.

Usage

Here is a simple example of the slider.

<div class="slider" data-kube="slider"></div>

This demo shows how to add the ticks below the slider.

<div class="slider" data-kube="slider">
    <div class="slider-ticks">
        <span data-value="0">0%</span>
        <span data-value="10"></span>
        <span data-value="20"></span>
        <span data-value="30"></span>
        <span data-value="40"></span>
        <span data-value="50">50%</span>
        <span data-value="60"></span>
        <span data-value="70"></span>
        <span data-value="80"></span>
        <span data-value="90"></span>
        <span data-value="100">100%</span>
    </div>
</div>

You can use the data-target attribute to send the slider value to an input or a layer.

<div class="slider" data-kube="slider" data-target="#mytarget" data-value="20"></div>

// target input
<input type="text" id="mytarget">

Settings

min

Type: Number

Default: 0

This setting sets the minimum value of the slider.

<div class="slider" data-kube="slider" data-min="-50"></div>

max

Type: Number

Default: 100

This setting sets the maximum value of the slider.

<div class="slider" data-kube="slider" data-min="-50" data-max="50"></div>

step

Type: Number

Default: 1

This setting sets the step value of the slider.

<div class="slider" data-kube="slider" data-step="0.1"></div>

value

Type: Number

Default: 0

This setting sets the initial value of the slider.

<div class="slider" data-kube="slider" data-value="20"></div>

target

Type: Boolean String

Default: false

This option sets the target of input or layer to send the slider value.

<div class="slider" data-kube="slider" data-target="#mytarget"></div>

// target input
<input type="text" id="mytarget">

Events

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            slider: {
                set: function(sender, value)
                {
                    console.log('Changed!');
                }
            }
        }
    });
})(Kube);

Catch events from a specific slider

Set an ID for the slider:

<div id="myslider" class="slider" data-kube="slider"></div>

Or set data-name attribute:

<div class="slider" data-name="myslider" data-kube="slider"></div>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            slider: {
                set: function(sender, value)
                {
                    if (sender._id === 'myslider')
                    {
                        console.log('The value of #myslider is changed.');
                    }
                }
            }
        }
    });
})(Kube);

Methods

Use API inside modules

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        updateSlider: function()
        {
            // for all sliders on the page
            this.app.api('slider.update', 50);

            // for specified slider
            this.app.api('slider.myslider.update', 50);
        }
    });
})(Kube);

Use API from outside

// for all sliders on the page
<button onclick="$K.api('slider.update', 50);">Update</button>

// for specified slider
<button onclick="$K.api('slider.myslider.update', 50);">Update</button>