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
Event | Description |
---|---|
set |
This event fires when the value of the slider is changed. |
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
Method | Description |
---|---|
update |
Set the slider value. |
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>