## Properties

Name | Type | Default
--- | --- | ---
width | Number/String | 300
Sets the slider's width. #### Code examples Initialize a jqxSlider with the `width` property specified.
    $('#jqxSlider').jqxSlider({ width:"300px" });
height | Number/String | 35
Sets the slider's height. #### Code examples Initialize a jqxSlider with the `height` property specified.
    $('#jqxSlider').jqxSlider({ height:"15px" });
disabled | Boolean | false
Gets or sets whether the slider is disabled. #### Code examples Initialize a jqxSlider with the `disabled` property specified.
    $('#jqxSlider').jqxSlider({ disabled:true });
max | Number | 10
Sets or gets slider's maximum value. #### Code examples Initialize a jqxSlider with the `max` property specified.
    $('#jqxSlider').jqxSlider({ max: 100 });
min | Number | 0
Sets or gets slider's minimum value. #### Code examples Initialize a jqxSlider with the `min` property specified.
    $('#jqxSlider').jqxSlider({ min: 500 });
step | Number | 1
Sets or gets the slider's step when the user is using the keyboard arrows, slider increment and decrement buttons or the mouse wheel for changing the slider's value. #### Code examples Initialize a jqxSlider with the `step` property specified.
    $('#jqxSlider').jqxSlider({ step: 2 });
showTicks | Boolean | true
Sets or gets whether ticks will be shown. #### Code examples Initialize a jqxSlider with the `showTicks` property specified.
    $('#jqxSlider').jqxSlider({ showTicks: false });
ticksPosition | String | both
Sets or gets slider's ticks position. Possible values - 'top', 'bottom', 'both'. #### Code examples Initialize a jqxSlider with the `ticksPosition` property specified.
    $('#jqxSlider').jqxSlider({ ticksPosition: 'top' });
ticksFrequency | Number | 2
Sets or gets slider's ticks frequency. #### Code examples Initialize a jqxSlider with the `ticksFrequency` property specified.
    $('#jqxSlider').jqxSlider({ ticksFrequency: 1 });
showButtons | Bool | true
Sets or gets whether the scroll buttons will be shown. #### Code examples Initialize a jqxSlider with the `showButtons` property specified.
    $('#jqxSlider').jqxSlider({ showButtons: false });
buttonsPosition | String | both
Sets or gets scroll buttons position. Possible values 'both', 'left', 'right'. #### Code examples Initialize a jqxSlider with the `buttonsPosition` property specified.
    $('#jqxSlider').jqxSlider({ buttonsPosition: 'left' });
mode | String | default
Sets or gets slider's mode. In the 'default' mode, the slider's thumb can be dragged smoothly ( like a scrollbar ). In 'fixed' mode, the thumb is dragged with a 'step' specified by the 'step' property. #### Code examples Initialize a jqxSlider with the `mode` property specified.
    $('#jqxSlider').jqxSlider({ mode: 'fixed' });
showRange | Bool | true
Sets or gets whether the slider range background is displayed. This is the fill between the slider's left button and the slider's thumb to indicate the selected value. In range slider mode, the space between the handles is filled to indicate the selected values. #### Code examples Initialize a jqxSlider with the `showRange` property specified.
    $('#jqxSlider').jqxSlider({ showRange: false });
rangeSlider | Bool | false
Sets or gets whether the slider is displayed as a range slider and has 2 thumbs. This allows the user to select a range of values. By default, end-users can select only a single value. #### Code examples Initialize a jqxSlider with the `rangeSlider` property specified.
    $('#jqxSlider').jqxSlider({ rangeSlider: true });
tooltip | Bool | true
Sets or gets whether the slider title will be shown. #### Code examples Initialize a jqxSlider with the `tooltip` property specified.
    $('#jqxSlider').jqxSlider({ tooltip: false });
value | Number/Object | 0
Sets or gets slider's value. This poperty will be an object with the following structure { rangeStart: range_start, rangeEnd: range_end } if the slider is range slider otherwise it's going to be a number. #### Code examples Initialize a jqxSlider with the `value` property specified.
    $('#jqxSlider').jqxSlider({ value: 5 });
values | Array | [0, 10]
Sets or gets range slider's values. #### Code examples Initialize a jqxSlider with the `values` property specified.
    $('#jqxSlider').jqxSlider({ values: [2, 3] });
## Events
change | Event |
Change is triggered when the value of the slider is changed. #### Code examples Bind to the change event by type: jqxSlider.
    $('#jqxSlider').bind('change', function (event) { // Some code here. });
slide | Event |
This event is triggered when the user is dragging the sliders thumb. #### Code examples Bind to the slide event by type: jqxSlider.
    $('#jqxSlider').bind('slide', function (event) { // Some code here. });
slideStart | Event |
SlideStart is triggered when the user start dragging slider's thumb. #### Code examples Bind to the slideStart event by type: jqxSlider.
    $('#jqxSlider').bind('slideStart', function (event) { // Some code here. });
slideEnd | Event |
slideEnd event is triggered when the user have dragged the slider's thumb and drop it. #### Code examples Bind to the slideEnd event by type: jqxSlider.
    $('#jqxSlider').bind('slideEnd', function (event) { // Some code here. });
created | Event |
This event is triggered when the jqxSlider is created. #### Code examples Bind to the created event by type: jqxSlider.
    $('#jqxSlider').bind('created', function (event) { // Some code here. });
## Methods
incrementValue | Method |
Increases the jqxSlider's value with the value of the 'step' property. #### Code example Invoke the incrementValue method.
    $('#jqxSlider').jqxSlider('incrementValue');
decrementValue | Method |
Decreases the jqxSlider's value with the value of the 'step' property. #### Code example Invoke the decrementValue method.
    $('#jqxSlider').jqxSlider('decrementValue');
setValue | Method |
Sets the jqxSlider's value. When the slider is not in range slider mode, the required parameter for the value is a number which should be in the 'min' - 'max' range. Possible value types in range slider mode- array, object or two numbers. #### Code example Invoke the setValue method.
    $('#jqxSlider').jqxSlider('setValue', 3);
getValue | Method |
Getting slider's value. If it's a range slider this method returns an array. #### Code example Invoke the getValue method.
    $('#jqxSlider').jqxSlider('getValue');
disable | Method |
Disabling the slider. #### Code example Invoke the disable method.
    $('#jqxSlider').jqxSlider('disable');
enable | Method |
Enables the slider. #### Code example Invoke the enable method.
    $('#jqxSlider').jqxSlider('enable', element);