Slider

Override defaults with $.fn.slider.defaults.

Dependencies

Usage

When using as a form field, create slider from <input> markup.

  1. <input class="easyui-slider" name="font-size" value="12" showTip="true" rule="[0,'|',25,'|',50,'|',75,'|',100]" style="width:300px">  

Create slider from <div/> is also allowed but the 'value' attribute is invalid.

  1. <div class="easyui-slider" min="10" max="90" step="10" style="width:300px"></div>  

Create slider programatically.

  1. <div id="ss" style="height:200px"></div>  
  2. $('#ss').slider({  
  3.     mode: 'v',  
  4.     tipFormatter: function(value){  
  5.         return value + '%';  
  6.     }  
  7. });  

Properties

Name Type Description Default
width number The width of slider. auto
height number The height of slider. auto
mode string Indicate what type of slider. Possible values: 'h'(horizontal),'v'(vertical). h
showTip boolean Defines if to display value information tip. false
disabled boolean Defines if to disable slider. false
value number The default value. 0
min number The minimum allowed value. 0
max number The maximum allowed value. 100
step number The value to increase or descrease. 1
rule array Display labels beside slider, '|' — show just line. []
tipFormatter function A function to format slider value. Return string value that will display as tip.

Events

Name Parameters Description
onChange newValue, oldValue Fires when the field value is changed.
onSlideStart value Fires when begin to drag slider.
onSlideEnd value Fires when end to drag slider.

Methods

Name Parameter Description
options none Return the slider options.
destroy none Destroy the slider object.
resize param Set slider size. The 'param' parameter contains following properties:
width: the new slider width
height: the new slider height
getValue none Get slider value.
setValue value Set slider value.
enable none Enable the slider component.
disable none Disable the slider component.