jQuery EasyUI Form Plugin -Slider

jQuery EasyUI 插件jQuery EasyUI Plugin

Override the default defaults via $.fn.slider.defaults.

The slider allows users to select a value from a finite range. When moving the slider control along the track, a tooltip showing the current value will be displayed. Users can customize the slider by setting its properties.

Dependencies

  • draggable

Usage

Create a slider from an <input> tag when using it as a form field.

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

It is also allowed to create a slider from a <div>, but the 'value' attribute is invalid.

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

This creates a slider.

<div id="ss" style="height:200px"></div>

$('#ss').slider({
    mode: 'v',
    tipFormatter: function(value){
        return value + '%';
    }
});

Properties

Name Type Description Default Value
width number The width of the slider. auto
height number The height of the slider. auto
mode string The type of the slider. Possible values: 'h' (horizontal), 'v' (vertical). h
reversed boolean When set to true, the positions of the minimum and maximum values will be swapped. This property is available since version 1.3.2. false
showTip boolean Defines whether to display the value tooltip. false
disabled boolean Defines whether to disable the slider. false
value number Default value. 0
min number The minimum allowed value. 0
max number The maximum allowed value. 100
step number The value to increase or decrease. 1
rule array Display labels next to the slider, '|' — value display line. []
tipFormatter function A function to format the slider value. Returns a string value displayed as the tooltip.

Events

Name Parameters Description
onChange newValue,oldValue Triggered when the value of the field changes.
onSlideStart value Triggered when dragging the slider starts.
onSlideEnd value Triggered when dragging the slider stops.
onComplete value Triggered when the slider value is changed by the user, whether by dragging the slider or by clicking the slider. This event is available since version 1.3.4.

Methods

Name Parameters Description
options none Returns the slider options.
destroy none Destroys the slider object.
resize param Sets the slider size. The 'param' parameter contains the following properties:
width: the new slider width
height: the new slider height
getValue none Gets the value of the slider.
setValue value Sets the value of the slider.
clear none Clears the value of the slider. This method is available since version 1.3.5.
reset none Resets the value of the slider. This method is available since version 1.3.5.
enable none Enables the slider component.
disable none Disables the slider component.
jQuery EasyUI 插件jQuery EasyUI Plugin Other Extensions