Slider没有相对应的 HTML 控件，是一个相对独立的图形化的组件，可以通过鼠标、方向键来控制刻度尺的刻度。Dijit提供了水平和垂直滑动条。
Slider widget的使用却如同使用 CheckBox widget一样的方便。用户可以用鼠标点击、拖拉、中键滚动或者用键盘的上、下、左、右按键来选择Slider widget的刻度。
Silder 是由六个 widgets 组成，分别是：dijit.form.HorizontalSlider, dijit.form.VerticalSlider，dijit.form.HorizontalRule, dijit.form.VerticalRule，dijit.form.HorizontalRuleLabels, dijit.form.VerticalRuleLabels。
dijit.form.HorizontalSlider是水平方向的slider， dijit.form.VerticalSlider 是垂直方向的slider，提供可调节大小的标尺。其属性如下：
滑动条：HorizontalSlider 和 VerticalSlider 的属性
属性 属性类别 描述 clickSelect booleantrue 指定单击进度条是否可以更改刻度值 discreteValues integer
Infinity 在最大值与最小值之间可以设置的非连续值得个数 intermediateChanges Boolean
false 判断在调用 setValue 方法时是否直接触发 onChange 事件。如果为’ true ’，则每次执行 setValue 方法时都会触发 onChange 事件；如果为’ false ’，则 onChange 事件只有在自己被调用时才会被触发。 maximum integer
100 可设置的最大刻度值 minimum integer
0 可设置的最小刻度值 pageIncrement integer
2 点击键盘按键 pageup/pagedown 时一次变化的刻度值 showButtons boolean
true 指定是否在刻度条两端显示增加和减小的按钮
函数increment()表示以1单位为步长增加滑动条的值；函数decrement()表示以1单位为步长减少滑动条的值。
刻度尺：HorizontalRule 和 VerticalRule 的属性
属性 属性类别 描述 container NodecontainerNode 设置刻度尺或文本标签相对于滑动条的位置，HorizontalSlider使用topDecoration或bottomDecoration，VerticalSlider使用leftDecoration或rightDecoration。 count Integer
3 指定生成刻度线的数量 ruleStyle String 指定刻度线设置 CSS style
dijit.form.HorizontalRuleLabels, dijit.form.VerticalRuleLabels 可以为标尺提供刻度标签，其属性如下：
标签：HorizontalRuleLabels 和 VerticalRuleLabels 的属性
属性 属性类别 描述 labels Array[] 文本标签的数组，存放要展现的标签值 labelStyle String 指定为文本标签设置 CSS style minimum
Integer
0
在没有指定标签数组情况下，以这个值最左（下）端标签 maximumInteger
1
在没有指定标签数组情况下，以这个值最右（上）端标签 getLabelsFunction
[]
返回labels数组 constraintsObject
{pattern:"#%"}
在没有指定标签数组情况下，使用这个对象包含的模式来生成数字标签--声明方式：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Slider</title> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> <script> // 导入slider所需类 require(["dijit/form/VerticalSlider", "dojo/parser"]); </script> </head> <body class="claro"> <input id="vertSlider" data-dojo-type="dijit/form/VerticalSlider" data-dojo-props="minimum: 0,maximum: 100,pageIncrement: 20,value: 20,intermediateChanges: true,style: 'height: 200px;'"> </body> </html>
--编程方式：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Slider</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
// 导入slider所需类
require(["dijit/form/VerticalSlider"], function(VerticalSlider) {
//创建垂直滑动条
var vertSlider = new VerticalSlider({
minimum: 0,
maximum: 100,
pageIncrement: 20,
value: 20,
intermediateChanges: true,
style: "height: 200px;"
}, "vertSlider");
// Start up the widget
vertSlider.startup();
});
</script>
</head>
<body class="claro">
<input id="vertSlider" />
</body>
</html>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/195059C56-2.png" title="快照14.jpg" alt="wKioL1RYmW_TYP-fAAANP0LKVfM164.jpg" d="3714163" s="aa4_e74" t="jpg">
--添加文本标签，创建水平滑动条：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Slider</title> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> <script> // 导入slider所需类 require(["dijit/form/HorizontalSlider", "dijit/form/HorizontalRuleLabels", "dijit/form/HorizontalRule", "dojo/parser"]); </script> </head> <body class="claro"> <div style="width: 600px;margin-left: 30px;"> <!-- 创建水平滑动条标签--> <ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props="container: 'topDecoration',count: 11,numericMargin: 0" style="height: 1.2em; font-weight: bold"> </ol> <!-- 创建水平滑动条刻度尺--> <div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props="container: 'topDecoration',count: 11" style="height: 5px;margin:0 12px;"> </div> <!--创建水平滑动条，隐藏滑动条两端button--> <input id="hslider" type="range" value="3" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="minimum: 0,maximum: 10,showButtons: false,discreteValues: 11"> <!-- 创建水平滑动条刻度尺--> <div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props="container: 'bottomDecoration',count: 5" style="height: 5px; margin: 0 12px;"> </div> <!-- 创建水平滑动条标签--> <ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props="container: 'bottomDecoration'" style="height: 1em; font-weight: bold;"> <li>lowest</li> <li></li> <li>lowest2</li> <li>normal</li> <li>highest</li> </ol> </div> </body> </html>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/195059C56-2.png" title="快照15.jpg" alt="wKiom1RYq2WgF4IfAABVGxgWhlk780.jpg" d="3714164" s="0ea_2ce" t="jpg">
--添加文本标签，创建垂直滑动条：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Slider</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
</head>
<body class="claro">
<div id="vertSlider"></div>
<script>
require(["dijit/form/VerticalSlider", "dijit/form/VerticalRuleLabels", "dijit/form/VerticalRule", "dojo/dom-construct", "dojo/parser", "dojo/dom", "dojo/domReady!"],
function(VerticalSlider, VerticalRuleLabels, VerticalRule, domConstruct, parser, dom) {
// 创建刻度尺
var rulesNode = domConstruct.create("div", {}, dom.byId("vertSlider"), "first");
var sliderRules = new VerticalRule({container: "leftDecoration",count: 11,style: "width: 5px;"}, rulesNode);
// 创建标签
var labelsNode = domConstruct.create("div", {}, dom.byId("vertSlider"), "first");
var sliderLabels = new VerticalRuleLabels({container: "rightDecoration",labelStyle: "font-style: italic; font-size: 0.75em"}, labelsNode);
// 创建垂直滑动条
var vertSlider = new VerticalSlider({minimum: 0,maximum: 100,pageIncrement: 20,value: 20,intermediateChanges: true,style: "height: 200px;"}, "vertSlider");
// 生成小部件
vertSlider.startup();
sliderRules.startup();
sliderLabels.startup();
});
</script>
</body>
</html>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/195059C56-2.png" title="快照16.jpg" alt="wKiom1RYsG6hvY-xAAAWd2-dVIw434.jpg" d="3714165" s="eed_f83" t="jpg">
--创建水平刻度：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Slider</title> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> <script> // 导入slider所需类 require(["dijit/form/HorizontalSlider", "dijit/form/HorizontalRuleLabels", "dijit/form/HorizontalRule", "dojo/parser"]); </script> </head> <body class="claro"> <div dojoType="dijit.form.HorizontalSlider" name="caffeine" value="100" maximum="175" minimum="2" showButtons="false" style="margin: 5px;width:300px; height: 20px;"> <script type="dojo/method" event="onChange" args="newValue"> console.log(newValue); </script> <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:10px;font-size:75%;color:gray;" count="6"> </ol> <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"> </div> <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"> </div> <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:10px;font-size:75%;color:gray;"> <li>green<br>tea</li> <li>coffee</li> <li>red<br>bull</li> </ol> </div> </body> </html>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/195059C56-2.png" title="快照17.jpg" alt="wKioL1RYsoiBB6KgAAAkmq__a0c486.jpg" d="3714166" s="9f2_ccd" t="jpg">
--创建垂直刻度
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Slider</title> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> <script> // 导入slider所需类 require(["dijit/form/VerticalSlider", "dijit/form/VerticalRuleLabels", "dijit/form/VerticalRule", "dojo/parser"]); </script> </head> <body class="claro"> <div dojoType="dijit.form.VerticalSlider" name="caffeine" value="100" maximum="175" minimum="2" showButtons="false" style="margin: 5px;width:75px; height: 300px;"> <script type="dojo/method" event="onChange" args="newValue"> console.log(newValue); </script> <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="height:300px;width:25px;font-size:75%;color:gray;" count="6"> </ol> <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=6 style="height:300px;width:5px;"> </div> <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=5 style="height:300px;width:5px;"> </div> <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="height:300px;width:25px;font-size:75%;color:gray;"> <li>green tea</li> <li>coffee</li> <li>red bull</li> </ol> </div> </body> </html>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/195059C56-2.png" title="快照18.jpg" alt="wKioL1RYs7HBIaUjAAAqslNwD98073.jpg" d="3714167" s="ab6_675" t="jpg">
总结：分为三步（1）创建滑动条（2）创建刻度尺（3）创建标签。
参考：
http://dojotoolkit.org/documentation/tutorials/1.10/sliders/
http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro5/
http://www.ibm.com/developerworks/cn/views/web/libraryview.jsp?search_by=掌握+Dojo