demo
demo1(enable/disable)
enabledisable
demo2(virtical)
demo3(step)
synopsis
html
<div id="demo1"></div>
css
.box {
background-color: #ccc;
position: relative;
padding: 50px;
border: 1px solid #000;
margin: 10px;
}
.handle {
position: absolute;
border: 1px solid #666;
background-color: #fff;
width: 28px;
height: 28px;
border-radius: 5px;
}
.track {
position: absolute;
background-color: #888;
width: 10px;
height: 10px;
border-radius: 4px;
}
javascript
$("#demo1").simpleslider({box_class: 'box',
track_class: 'track',
handle_class: 'handle',
size: [150, 50]
});
options
| min | min value |
| max | max value |
| step | value change step |
| value | initial value |
| orientation | track direction. set 'horizontal' or 'vertical'. |
| box_class | class for box |
| track_class | class for track |
| handle_class | class for handle |
| box_disable_class | class for box when disable |
| track_disable_class | class for track when disable |
| handle_disable_class | class for handle when disable |
| change | callback function when value changed |
methods
| get_val | get value |
| set_val | set value |
| enable | can use slider |
| disable | can not use slider |