The slider component changes the range-type browser input to sliders.
By default, all <input>
elements with the type="range"
attribute and data-type="range"
and data-role="slider"
are displayed as Tizen Web UI sliders.
To manually create a slider component, use the component constructor from the tau
namespace (RECOMMENDED):
<input id="slider"> <script> var sliderElement = document.getElementById("slider"), slider = tau.widget.TizenSlider(sliderElement); </script>
The constructor requires an HTMLElement
parameter to create the component, and you can get it with the document.getElementById()
method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.
If the jQuery library is loaded, you can use its method (support for backward compatibility):
<input id="slider"> <script> $("#slider").slider(); </script>
To create slider input:
<input type="range" name="slider-1" id="slider" value="60" min="0" max="100">
The following table lists the options for the slider component.
Option | Input type | Default value | Description |
---|---|---|---|
data-center | boolean | false | Sets whether additional markup is created for pointing to the center of the slider. |
data-icon | string | "" | Icon type. |
data-inner-label | boolean | false | Displays the value inside the handler. |
data-popup | boolean | false | Sets whether the pop-up is enabled. |
data-text-left | string | "" | Text attached to the left of the slider. |
data-text-right | string | "" | Text attached to the right of the slider. |
To call a method on the component, use one of the existing APIs:
TAU API (RECOMMENDED):
<input id="slider" type="range" name="slider" value="60" min="0" max="100"> <script> var slider = document.getElementById("slider"), slider = tau.widget.TizenSlider(slider); // slider.methodName(methodArgument1, methodArgument2, ...); // For example var value = slider.value("5"); </script>
jQuery API (support for backward compatibility):
<input id="slider" type="range" name="slider" value="60" min="0" max="100"> <script> // $("#slider").TizenSlider("methodName", argument1, argument2, ...); // For example $("#slider").slider("value", "5"); </script>
Method | Description |
---|---|
Slider disable ( ) |
Disables the slider. |
Slider enable ( ) |
Enables the slider. |
Slider refresh ( ) |
Refreshes a slider markup. |
string value ( ) |
Gets or sets a value. |
disable
Disables the slider.
Slider disable ( )
The method sets the disabled attribute for the slider and changes the look of the slider to the disabled state.
Return value:
Type | Description |
---|---|
Slider | Returns this. |
Code example (TAU API RECOMMENDED):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> var slider = document.getElementById("mySlider1"), sliderWidget = tau.widget.TizenSlider(slider); sliderWidget.disable(); </script>
Code example (jQuery API support for backward compatibility):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> $("#mySlider1").slider("disable"); </script>
enable
Enables the slider.
Slider enable ( )
The method removes the disabled attribute from the slider and changes the look of the slider to the enabled state.
Return value:
Type | Description |
---|---|
Slider | Returns this. |
Code example (TAU API RECOMMENDED):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> var slider = document.getElementById("mySlider1"), sliderWidget = tau.widget.TizenSlider(slider); sliderWidget.enable(); </script>
Code example (jQuery API support for backward compatibility):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> $("#mySlider1").slider("enable"); </script>
refresh
Refreshes a slider markup.
Slider refresh ( )
The method rebuilds the DOM structure of the slider component. It must be called after you manually change the HTML attributes of the component's DOM structure.
The method is called automatically after any component option is changed.
Return value:
Type | Description |
---|---|
Slider | Returns this. |
Code example (TAU API RECOMMENDED):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> var slider = document.getElementById("mySlider1"), sliderWidget = tau.widget.TizenSlider(slider); sliderWidget.refresh(); </script>
Code example (jQuery API support for backward compatibility):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> $("#mySlider1").slider("refresh"); </script>
value
Gets or sets a value.
string value ( )
Since: 2.3
The method returns the element value or sets the element value.
Return value:
Type | Description |
---|---|
string | In the get mode, returns the element value. |
Code example (TAU API RECOMMENDED):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> var slider = document.getElementById("mySlider1"), sliderWidget = tau.widget.TizenSlider(slider); // Value contains index of select tag value = sliderWidget.value(); // Sets the index for the slider sliderWidget.value("1"); </script>
Code example (jQuery API support for backward compatibility):
<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" /> <script> // Value contains index of select tag $("#mySlider1").slider("value"); // Sets the index for the slider $("#mySlider1").slider("value", "1"); </script>