ttp://www.jeasyui.com/demo/main/index.php?plugin=Slider&theme=gray&dir=rtl&pitem=Format%20Tip%20Information
http://www.jeasyui.com/documentation/slider.php
Slider
Override defaults with $.fn.slider.defaults.
The slider enables the user to choose a numeric value from a finite range. When moving the thumb control along the track, a tip will display to represent the current value. The user can customize slider by setting its properties.
Dependencies
draggable
Usage Example
When using as a form field, create slider from <input> markup.
<input class="easyui-slider" value="12" style="width:300px"
data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]">
Create slider from <div/> is also allowed but the 'value' attribute is invalid.
<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>
Create slider programatically.
<div id="ss" style="height:200px"></div>
$('#ss').slider({
mode: 'v',
tipFormatter: function(value){
return value + '%';
}
Properties
NameTypeDescriptionDefault
widthnumberThe width of slider.auto
heightnumberThe height of slider.auto
modestringIndicate what type of slider. Possible values: 'h'(horizontal),'v'(vertical).h
reversedbooleanSet to true the minimum value and maximum value will switch their positions. Available since version 1.3.2.false
showTipbooleanDefines if to display value information tip.false
disabledbooleanDefines if to disable slider.false
valuenumberThe default value.0
minnumberThe minimum allowed value.0
maxnumberThe maximum allowed value.100
stepnumberThe value to increase or descrease.1
rulearrayDisplay labels beside slider, '|' — show just line.[]
tipFormatterfunctionA function to format slider value. Return string value that will display as tip.
converterfunctionThe converter function that allows users determine how to convert a value to the slider position or the slider position to the value. Available since version 1.3.6.
Code example:
$('#ss').slider({ converter:{ toPosition:function(value, size){ var opts = $(this).slider('options'); return (value-opts.min)/(opts.max-opts.min)*size; }, toValue:function(pos, size){ var opts = $(this).slider('options'); return opts.min + (opts.max-opts.min)*(pos/size); } }});
Events
NameParametersDescription
onChangenewValue,oldValueFires when the field value is changed.
onSlideStartvalueFires when begin to drag slider.
onSlideEndvalueFires when end to drag slider.
onCompletevalueFires when the slider value is changed by user, no matter dragged or clicked the slider. Available since version 1.3.4.
Methods
NameParameterDescription
optionsnoneReturn the slider options.
destroynoneDestroy the slider object.
resizeparamSet slider size. The 'param' parameter contains following properties:
width: the new slider width
height: the new slider height
getValuenoneGet slider value.
setValuevalueSet slider value.
clearnoneClear the slider value. Available since version 1.3.5.
resetnoneReset the slider value. Available since version 1.3.5.
enablenoneEnable the slider component.
disablenoneDisable the slider component.
