You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1331 lines
36 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="Examples for bootstrap-slider plugin">
  7. <meta name="author" content="">
  8. <title>Slider for Bootstrap Examples Page</title>
  9. <!-- core CSS -->
  10. <link href="<%= css.bootstrap %>" rel="stylesheet">
  11. <link href="<%= css.slider %>" rel="stylesheet">
  12. <!-- Hightlight.js Theme Styles -->
  13. <link href="<%= css.highlightjs %>" rel="stylesheet">
  14. <!-- Custom styles for this template -->
  15. <style type='text/css'>
  16. /* Space out content a bit */
  17. body {
  18. padding-top: 20px;
  19. padding-bottom: 20px;
  20. }
  21. h1 small {
  22. font-size: 51%;
  23. }
  24. /* Everything but the jumbotron gets side spacing for mobile first views */
  25. .header,
  26. .marketing,
  27. .footer {
  28. padding-left: 15px;
  29. padding-right: 15px;
  30. }
  31. /* Custom page header */
  32. .header {
  33. border-bottom: 1px solid #e5e5e5;
  34. }
  35. /* Make the masthead heading the same height as the navigation */
  36. .header h3 {
  37. margin-top: 0;
  38. margin-bottom: 0;
  39. line-height: 40px;
  40. padding-bottom: 19px;
  41. }
  42. /* Custom page footer */
  43. .footer {
  44. padding-top: 19px;
  45. color: #777;
  46. border-top: 1px solid #e5e5e5;
  47. }
  48. /* Customize container */
  49. .container {
  50. min-width: 640px;
  51. }
  52. @media (min-width: 768px) {
  53. .container {
  54. max-width: 1000px;
  55. }
  56. }
  57. .container-narrow > hr {
  58. margin: 30px 0;
  59. }
  60. /* Main marketing message and sign up button */
  61. .title {
  62. text-align: center;
  63. border-bottom: 1px solid #e5e5e5;
  64. }
  65. /* Responsive: Portrait tablets and up */
  66. @media screen and (min-width: 768px) {
  67. /* Remove the padding we set earlier */
  68. .header,
  69. .footer {
  70. padding-left: 0;
  71. padding-right: 0;
  72. }
  73. /* Space out the masthead */
  74. .header {
  75. margin-bottom: 30px;
  76. }
  77. /* Remove the bottom border on the jumbotron for visual effect */
  78. .title {
  79. border-bottom: 0;
  80. }
  81. }
  82. .well {
  83. background-color: #E0E0E0;
  84. }
  85. .slider-example {
  86. padding-top: 10px;
  87. padding-bottom: 55px;
  88. margin: 35px 0;
  89. }
  90. #destroyEx5Slider, #ex6CurrentSliderValLabel, #ex7-enabled {
  91. margin-left: 45px;
  92. }
  93. #ex6SliderVal {
  94. color: green;
  95. }
  96. #slider12a .slider-track-high, #slider12c .slider-track-high {
  97. background: green;
  98. }
  99. #slider12b .slider-track-low, #slider12c .slider-track-low {
  100. background: red;
  101. }
  102. #slider12c .slider-selection {
  103. background: yellow;
  104. }
  105. #slider22 .slider-selection {
  106. background: #2196f3;
  107. }
  108. #slider22 .slider-rangeHighlight {
  109. background: #f70616;
  110. }
  111. #slider22 .slider-rangeHighlight.category1 {
  112. background: #FF9900;
  113. }
  114. #slider22 .slider-rangeHighlight.category2 {
  115. background: #99CC00;
  116. }
  117. </style>
  118. <style type='text/css'>
  119. /* Example 1 custom styles */
  120. #ex1Slider .slider-selection {
  121. background: #BABABA;
  122. }
  123. /* Example 3 custom styles */
  124. #RGB {
  125. height: 20px;
  126. background: rgb(128, 128, 128);
  127. }
  128. #RC .slider-selection {
  129. background: #FF8282;
  130. }
  131. #RC .slider-handle {
  132. background: red;
  133. }
  134. #GC .slider-selection {
  135. background: #428041;
  136. }
  137. #GC .slider-handle {
  138. background: green;
  139. }
  140. #BC .slider-selection {
  141. background: #8283FF;
  142. }
  143. #BC .slider-handle {
  144. border-bottom-color: blue;
  145. }
  146. #R, #G, #B {
  147. width: 300px;
  148. }
  149. </style>
  150. <script type='text/javascript' src="<%= js.modernizr %>"></script>
  151. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  152. <!--[if lt IE 9]>
  153. <script src="../../assets/js/html5shiv.js"></script>
  154. <script src="../../assets/js/respond.min.js"></script>
  155. <![endif]-->
  156. <!-- Highlight.js Styles -->
  157. </head>
  158. <body>
  159. <div class="container">
  160. <div class="jumbotron">
  161. <h1>Slider for Bootstrap <small>bootstrap-slider.js</small></h1>
  162. <p class="lead">Examples for the <a target="_blank" href="https://github.com/seiyria/bootstrap-slider">bootstrap-slider</a> component.<p>
  163. </div>
  164. <div class="examples">
  165. <div id="example-1" class='slider-example'>
  166. <h3>Example 1:</h3>
  167. <p>Basic example with custom formatter and colored selected region via CSS.</p>
  168. <div class="well">
  169. <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
  170. </div>
  171. <h5>HTML</h5>
  172. <pre><code class="html">
  173. &ltinput id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt
  174. </code></pre>
  175. <h5>JavaScript</h5>
  176. <pre><code class="js">
  177. // With JQuery
  178. $('#ex1').slider({
  179. formatter: function(value) {
  180. return 'Current value: ' + value;
  181. }
  182. });
  183. // Without JQuery
  184. var slider = new Slider('#ex1', {
  185. formatter: function(value) {
  186. return 'Current value: ' + value;
  187. }
  188. });
  189. </code></pre>
  190. <h5>CSS</h5>
  191. <pre><code class="css">
  192. #ex1Slider .slider-selection {
  193. background: #BABABA;
  194. }
  195. </code></pre>
  196. </div>
  197. <div id="example-2" class='slider-example'>
  198. <h3>Example 2:</h3>
  199. <p>Range selector, options specified via data attribute.</p>
  200. <div class="well">
  201. Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>
  202. </div>
  203. <h5>HTML</h5>
  204. <pre><code class="html">
  205. Filter by price interval: &ltb&gt€ 10&lt/b&gt &ltinput id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/&gt &ltb&gt€ 1000&lt/b&gt
  206. </code></pre>
  207. <h5>JavaScript</h5>
  208. <pre><code class="js">
  209. // With JQuery
  210. $("#ex2").slider({});
  211. // Without JQuery
  212. var slider = new Slider('#ex2', {});
  213. </code></pre>
  214. </div>
  215. <div id="example-3" class='slider-example'>
  216. <h3>Example 3:</h3>
  217. <p>Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles.</p>
  218. <div class="well">
  219. <p>
  220. <b>R</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" />
  221. </p>
  222. <p>
  223. <b>G</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" />
  224. </p>
  225. <p>
  226. <b>B</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" />
  227. </p>
  228. <div id="RGB"></div>
  229. </div>
  230. <h5>HTML</h5>
  231. <pre><code class="html">
  232. &ltp&gt
  233. &ltb&gtR&lt/b&gt &ltinput type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" /&gt
  234. &lt/p&gt
  235. &ltp&gt
  236. &ltb&gtG&lt/b&gt &ltinput type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" /&gt
  237. &lt/p&gt
  238. &ltp&gt
  239. &ltb&gtB&lt/b&gt &ltinput type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" /&gt
  240. &lt/p&gt
  241. &ltdiv id="RGB"&gt&lt/div&gt
  242. </code></pre>
  243. <h5>JavaScript</h5>
  244. <pre><code class="js">
  245. var RGBChange = function() {
  246. $('#RGB').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
  247. };
  248. var r = $('#R').slider()
  249. .on('slide', RGBChange)
  250. .data('slider');
  251. var g = $('#G').slider()
  252. .on('slide', RGBChange)
  253. .data('slider');
  254. var b = $('#B').slider()
  255. .on('slide', RGBChange)
  256. .data('slider');
  257. </code></pre>
  258. <h5>CSS</h5>
  259. <pre><code class="css">
  260. #RGB {
  261. height: 20px;
  262. background: rgb(128, 128, 128);
  263. }
  264. #RC .slider-selection {
  265. background: #FF8282;
  266. }
  267. #RC .slider-handle {
  268. background: red;
  269. }
  270. #GC .slider-selection {
  271. background: #428041;
  272. }
  273. #GC .slider-handle {
  274. background: green;
  275. }
  276. #BC .slider-selection {
  277. background: #8283FF;
  278. }
  279. #BC .slider-handle {
  280. border-bottom-color: blue;
  281. }
  282. #R, #G, #B {
  283. width: 300px;
  284. }
  285. </code></pre>
  286. </div>
  287. <div id="example-4" class='slider-example'>
  288. <h3>Example 4:</h3>
  289. <p>Vertical Slider with reversed values (largest to smallest).</p>
  290. <div class="well">
  291. <input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/>
  292. </div>
  293. <h5>HTML</h5>
  294. <pre><code class="html">
  295. &ltinput id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/&gt
  296. </code></pre>
  297. <h5>JavaScript</h5>
  298. <pre><code class="js">
  299. // With JQuery
  300. $("#ex4").slider({
  301. reversed : true
  302. });
  303. // Without JQuery
  304. var slider = new Slider("#ex4", {
  305. reversed : true
  306. });
  307. </code></pre>
  308. </div>
  309. <div id="example-5" class='slider-example'>
  310. <h3>Example 5:</h3>
  311. <p>Destroy instance of slider by calling destroy() method on slider instance via JavaScript.
  312. <div class="well">
  313. <input id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/>
  314. <button id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy</button>
  315. </div>
  316. <h5>HTML</h5>
  317. <pre><code class="html">
  318. &ltinput id="ex5" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/&gt
  319. &ltbutton id="destroyEx5Slider" class='btn btn-danger'>Click to Destroy&lt/button&gt
  320. </code></pre>
  321. <h5>JavaScript</h5>
  322. <pre><code class="js">
  323. // With JQuery
  324. $("#ex5").slider();
  325. // Without JQuery
  326. var slider = new Slider('#ex5');
  327. $("#destroyEx5Slider").click(function() {
  328. // With JQuery
  329. $("#ex5").slider('destroy');
  330. // Without JQuery
  331. slider.destroy();
  332. });
  333. </code></pre>
  334. </div>
  335. <div id="example-6" class='slider-example'>
  336. <h3>Example 6:</h3>
  337. <p>Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.</p>
  338. <div class="well">
  339. <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
  340. <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
  341. </div>
  342. <h5>HTML</h5>
  343. <pre><code class="html">
  344. &ltinput id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/&gt
  345. &ltspan id="ex6CurrentSliderValLabel">Current Slider Value: &ltspan id="ex6SliderVal"&gt3&lt/span&gt&lt/span&gt
  346. </code></pre>
  347. <h5>JavaScript</h5>
  348. <pre><code class="js">
  349. // With JQuery
  350. $("#ex6").slider();
  351. $("#ex6").on("slide", function(slideEvt) {
  352. $("#ex6SliderVal").text(slideEvt.value);
  353. });
  354. // Without JQuery
  355. var slider = new Slider("#ex6");
  356. slider.on("slide", function(sliderValue) {
  357. document.getElementById("ex6SliderVal").textContent = sliderValue;
  358. });
  359. </code></pre>
  360. </code></pre>
  361. </div>
  362. <div id="example-7" class='slider-example'>
  363. <h3>Example 7:</h3>
  364. <p>Sliders can be enabled and disabled.</p>
  365. <div class="well">
  366. <input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
  367. <input id="ex7-enabled" type="checkbox"/> Enabled
  368. </div>
  369. <h5>HTML</h5>
  370. <pre><code class="html">
  371. &ltinput id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/&gt
  372. &ltinput id="ex7-enabled" type="checkbox"/&gt Enabled
  373. </code></pre>
  374. <h5>JavaScript</h5>
  375. <pre><code class="js">
  376. // With JQuery
  377. $("#ex7").slider();
  378. // Without JQuery
  379. var slider = new Slider("#ex7");
  380. $("#ex7-enabled").click(function() {
  381. if(this.checked) {
  382. // With JQuery
  383. $("#ex7").slider("enable");
  384. // Without JQuery
  385. slider.enable();
  386. }
  387. else {
  388. // With JQuery
  389. $("#ex7").slider("disable");
  390. // Without JQuery
  391. slider.disable();
  392. }
  393. });
  394. </code></pre>
  395. </div>
  396. <div id="example-8" class='slider-example'>
  397. <h3>Example 8:</h3>
  398. <p>Tooltip can always be displayed.</p>
  399. <div class="well">
  400. <input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
  401. </div>
  402. <h5>HTML</h5>
  403. <pre><code class="html">
  404. &ltinput id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt
  405. </code></pre>
  406. <h5>JavaScript</h5>
  407. <pre><code class="js">
  408. // With JQuery
  409. $("#ex8").slider({
  410. tooltip: 'always'
  411. });
  412. // Without JQuery
  413. var slider = new Slider("#ex8", {
  414. tooltip: 'always'
  415. });
  416. </code></pre>
  417. </div>
  418. <div id="example-9" class='slider-example'>
  419. <h3>Example 9:</h3>
  420. <p>Precision (number of places after the decimal) can be specified.</p>
  421. <div class="well">
  422. <input id="ex9" type="text"/>
  423. </div>
  424. <h5>HTML</h5>
  425. <pre><code class="html">
  426. &ltinput id="ex9" type="text"/&gt
  427. </code></pre>
  428. <h5>JavaScript</h5>
  429. <pre><code class="js">
  430. // With JQuery
  431. $("#ex9").slider({
  432. precision: 2,
  433. value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
  434. });
  435. // Without JQuery
  436. var slider = new Slider("#ex9", {
  437. precision: 2,
  438. value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
  439. });
  440. </code></pre>
  441. </div>
  442. <div id="example-10" class='slider-example'>
  443. <h3>Example 10:</h3>
  444. <p>Setting custom handlers.</p>
  445. <div class="well">
  446. <input id="ex10" type="text" data-slider-handle="custom"/>
  447. </div>
  448. <h5>HTML</h5>
  449. <pre><code class="html">
  450. &ltinput id="ex10" type="text" data-slider-handle="custom"/&gt
  451. </code></pre>
  452. <h5>JavaScript</h5>
  453. <pre><code class="js">
  454. // With JQuery
  455. $("#ex10").slider({});
  456. // Without JQuery
  457. var slider = new Slider("#ex10", {});
  458. </code></pre>
  459. <h5>CSS</h5>
  460. <pre><code class="css">
  461. .slider-handle.custom {
  462. background: transparent none;
  463. /* You can customize the handle and set a background image */
  464. }
  465. /* Or display content like unicode characters or fontawesome icons */
  466. .slider-handle.custom::before {
  467. line-height: 20px;
  468. font-size: 20px;
  469. content: '\2605'; /*unicode star character*/
  470. color: #726204;
  471. }
  472. </code></pre>
  473. </div>
  474. <div id="example-11" class='slider-example'>
  475. <h3>Example 11:</h3>
  476. <p>Using a custom step interval.</p>
  477. <div class="well">
  478. <input id="ex11" type="text" data-slider-handle="custom"/>
  479. </div>
  480. <h5>HTML</h5>
  481. <pre><code class="html">
  482. &ltinput id="ex11" type="text" data-slider-handle="custom"/&gt
  483. </code></pre>
  484. <h5>JavaScript</h5>
  485. <pre><code class="js">
  486. // With JQuery
  487. $("#ex11").slider({step: 20000, min: 0, max: 200000});
  488. // Without JQuery
  489. var slider = new Slider("#ex11", {
  490. step: 20000,
  491. min: 0,
  492. max: 200000
  493. });
  494. </code></pre>
  495. </div>
  496. <div id="example-12" class='slider-example'>
  497. <h3>Example 12:</h3>
  498. <p>Coloring the low and high track segments.</p>
  499. <div class="well">
  500. Single-value slider, high track:<br/>
  501. <input id="ex12a" type="text"/><br/>
  502. Note that there is no low track on the single-value slider. The
  503. area lesser than the value of the handle is the selection.
  504. <br/><br/>
  505. Range slider, low track:<br/>
  506. <input id="ex12b" type="text"/>
  507. <br/><br/>
  508. Range slider, low and high tracks, and selection:<br/>
  509. <input id="ex12c" type="text"/>
  510. </div>
  511. <h5>HTML</h5>
  512. <pre><code class="html">
  513. &lt;!-- Single-value slider, high track: --&gt;
  514. &ltinput id="ex12a" type="text"/&gt&ltbr/&gt
  515. Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.
  516. &lt;!-- Range slider, low track: --&gt;
  517. &ltinput id="ex12b" type="text"/&gt&ltbr/&gt
  518. &lt;!-- Range slider, low and high tracks, and selection: --&gt;
  519. &ltinput id="ex12c" type="text"/&gt&ltbr/&gt
  520. </code></pre>
  521. <h5>JavaScript</h5>
  522. <pre><code class="js">
  523. // With JQuery
  524. $("#ex12a").slider({ id: "slider12a", min: 0, max: 10, value: 5 });
  525. $("#ex12b").slider({ id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
  526. $("#ex12c").slider({ id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
  527. // Without JQuery
  528. var sliderA = new Slider("#ex12a", { id: "slider12a", min: 0, max: 10, value: 5 });
  529. var sliderB = new Slider("#ex12b", { id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
  530. var sliderC = new Slider("#ex12c", { id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
  531. </code></pre>
  532. <h5>CSS</h5>
  533. <pre><code class="css">
  534. #slider12a .slider-track-high, #slider12c .slider-track-high {
  535. background: green;
  536. }
  537. #slider12b .slider-track-low, #slider12c .slider-track-low {
  538. background: red;
  539. }
  540. #slider12c .slider-selection {
  541. background: yellow;
  542. }
  543. </code></pre>
  544. </div>
  545. <div id="example-13" class='slider-example'>
  546. <h3>Example 13:</h3>
  547. <p>Using tick marks and labels.</p>
  548. <div class="well">
  549. <input id="ex13" type="text"/>
  550. </div>
  551. <h5>HTML</h5>
  552. <pre><code class="html">
  553. &lt;input id="ex13" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/&gt;
  554. </code></pre>
  555. <h5>JavaScript</h5>
  556. <pre><code class="js">
  557. // With JQuery
  558. $("#ex13").slider({
  559. ticks: [0, 100, 200, 300, 400],
  560. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  561. ticks_snap_bounds: 30
  562. });
  563. // Without JQuery
  564. var slider = new Slider("#ex13", {
  565. ticks: [0, 100, 200, 300, 400],
  566. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  567. ticks_snap_bounds: 30
  568. });
  569. </code></pre>
  570. </div>
  571. <div id="example-14" class='slider-example'>
  572. <h3>Example 14:</h3>
  573. <p>Using tick marks at specific positions..</p>
  574. <div class="well">
  575. <input id="ex14" type="text"/>
  576. </div>
  577. <h5>HTML</h5>
  578. <pre><code class="html">
  579. &ltinput id="ex14" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]' data-slider-ticks-positions="[0, 30, 70, 90, 100]" /&gt
  580. </code></pre>
  581. <h5>JavaScript</h5>
  582. <pre><code class="js">
  583. // With JQuery
  584. $("#ex14").slider({
  585. ticks: [0, 100, 200, 300, 400],
  586. ticks_positions: [0, 30, 70, 90, 100],
  587. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  588. ticks_snap_bounds: 30
  589. });
  590. // Without JQuery
  591. var slider = new Slider("#ex14", {
  592. ticks: [0, 100, 200, 300, 400],
  593. ticks_positions: [0, 30, 70, 90, 100],
  594. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  595. ticks_snap_bounds: 30
  596. });
  597. </code></pre>
  598. </div>
  599. <div id="example-15" class='slider-example'>
  600. <h3>Example 15:</h3>
  601. <p>With a logarithmic scale.</p>
  602. <div class="well">
  603. <input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" />
  604. </div>
  605. <h5>HTML</h5>
  606. <pre><code class="html">
  607. &lt;input id="ex15" type="text" data-slider-min="1000" data-slider-max="10000000" data-slider-step="5" /&gt;
  608. </code></pre>
  609. <h5>JavaScript</h5>
  610. <pre><code class="js">
  611. // With JQuery
  612. $("#ex15").slider({
  613. min: 1000,
  614. max: 10000000,
  615. scale: 'logarithmic',
  616. step: 10
  617. });
  618. // Without JQuery
  619. var slider = new Slider('#ex15', {
  620. min: 1000,
  621. max: 10000000,
  622. scale: 'logarithmic',
  623. step: 10
  624. });
  625. </code></pre>
  626. </div>
  627. <div id="example-16" class="slider-example">
  628. <h3>Example 16:</h3>
  629. <p>Focus the slider handle after a value change.</p>
  630. <div class="well">
  631. Single-value slider:<br/>
  632. <input id="ex16a" type="text"/><br/>
  633. <br/><br/>
  634. Range slider:<br/>
  635. <input id="ex16b" type="text"/>
  636. </div>
  637. <h5>HTML</h5>
  638. <pre><code class="html">
  639. &lt;!-- Single-value slider: --&gt;
  640. &ltinput id="ex16a" type="text"/&gt&ltbr/&gt
  641. &lt;!-- Range slider: --&gt;
  642. &ltinput id="ex16b" type="text"/&gt&ltbr/&gt
  643. Note that the slider handle that caused the value change is focused.
  644. </code></pre>
  645. <h5>JavaScript</h5>
  646. <pre><code class="js">
  647. // With JQuery
  648. $("#ex16a").slider({ min: 0, max: 10, value: 0, focus: true });
  649. $("#ex16b").slider({ min: 0, max: 10, value: [0, 10], focus: true });
  650. // Without JQuery
  651. var sliderA = new Slider("#ex16a", { min: 0, max: 10, value: 0, focus: true });
  652. var sliderB = new Slider("#ex16b", { min: 0, max: 10, value: [0, 10], focus: true });
  653. </code></pre>
  654. </div>
  655. <div id="example-17" class="slider-example">
  656. <h3>Example 17:</h3>
  657. <p>Unusual tooltip positions</p>
  658. <div class="well">
  659. Horizontal slider with tooltip on the bottom<br/><br/>
  660. <input id="ex17a" type="text"/><br/><br/><br/>
  661. Vertical slider with tooltip on the left<br/><br/>
  662. <input id="ex17b" type="text"/>
  663. </div>
  664. <h5>HTML</h5>
  665. <pre><code class="html">
  666. &ltinput id="ex17a" type="text"/&gt
  667. &ltinput id="ex17b" type="text"/&gt
  668. </code></pre>
  669. <h5>JS</h5>
  670. <pre><code class="js">
  671. // With JQuery
  672. $("#ex17a").slider({
  673. min: 0,
  674. max: 10,
  675. value: 0,
  676. tooltip_position:'bottom'
  677. });
  678. $("#ex17b").slider({
  679. min: 0,
  680. max: 10,
  681. value: 0,
  682. orientation: 'vertical',
  683. tooltip_position:'left'
  684. });
  685. // Without JQuery
  686. var sliderA = new Slider("#ex17a", {
  687. min: 0,
  688. max: 10,
  689. value: 0,
  690. tooltip_position:'bottom'
  691. });
  692. var sliderB = new Slider("#ex17b", {
  693. min: 0,
  694. max: 10,
  695. value: 0,
  696. orientation: 'vertical',
  697. tooltip_position:'left'
  698. });
  699. </code></pre>
  700. </div>
  701. <div id="example-18" class="slider-example">
  702. <h3>Example 18:</h3>
  703. <p>Accessibility with ARIA labels</p>
  704. <div class="well">
  705. Slider with single value and label:<br/><br/>
  706. <span id="ex18-label-1" class="hidden">
  707. Example slider label
  708. </span>
  709. <input id="ex18a" type="text" /><br/><br/><br/>
  710. Range slider with multiple labels:<br/><br/>
  711. <span id="ex18-label-2a" class="hidden">
  712. Example low value
  713. </span>
  714. <span id="ex18-label-2b" class="hidden">
  715. Example high value
  716. </span>
  717. <input id="ex18b" type="text" />
  718. </div>
  719. <h5>HTML</h5>
  720. <pre><code class="html">
  721. &lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
  722. &lt;input id="ex18a" type="text"/&gt;
  723. &lt;span id="ex18-label-2a" class="hidden"&gt;Example low value&lt;/span&gt;
  724. &lt;span id="ex18-label-2b" class="hidden"&gt;Example high value&lt;/span&gt;
  725. &lt;input id="ex18b" type="text"/&gt;
  726. </pre></code>
  727. <h5>JavaScript</h5>
  728. <pre><code class="js">
  729. // With JQuery
  730. $("#ex18a").slider({
  731. min: 0,
  732. max: 10,
  733. value: 5,
  734. labelledby: 'ex18-label-1'
  735. });
  736. $("#ex18b").slider({
  737. min: 0,
  738. max: 10,
  739. value: [3, 6],
  740. labelledby: ['ex18-label-2a', 'ex18-label-2b']
  741. });
  742. // Without JQuery
  743. var sliderA = new Slider("#ex18a", {
  744. min: 0,
  745. max: 10,
  746. value: 5,
  747. labelledby: 'ex18-label-1'
  748. });
  749. var sliderB = new Slider("#ex18b", {
  750. min: 0,
  751. max: 10,
  752. value: [3, 6],
  753. labelledby: ['ex18-label-2a', 'ex18-label-2b']
  754. });
  755. </pre></code>
  756. </div>
  757. <div id="example-19" class="slider-example">
  758. <h3>Example 19:</h3>
  759. <p>Auto-Register data-provide="slider" Elements</p>
  760. <div class="well">
  761. Slider-Element not accompanied by any custom Javascript:<br/><br/>
  762. <span id="ex18-label-1" class="hidden">
  763. Example slider label
  764. </span>
  765. <input id="ex19" type="text"
  766. data-provide="slider"
  767. data-slider-ticks="[1, 2, 3]"
  768. data-slider-ticks-labels='["short", "medium", "long"]'
  769. data-slider-min="1"
  770. data-slider-max="3"
  771. data-slider-step="1"
  772. data-slider-value="3"
  773. data-slider-tooltip="hide" />
  774. </div>
  775. <h5>HTML</h5>
  776. <pre><code class="html">
  777. &lt;span id="ex18-label-1" class="hidden">Example slider label&lt;/span&gt;
  778. &lt;input id="ex19" type="text"
  779. data-provide="slider"
  780. data-slider-ticks="[1, 2, 3]"
  781. data-slider-ticks-labels='["short", "medium", "long"]'
  782. data-slider-min="1"
  783. data-slider-max="3"
  784. data-slider-step="1"
  785. data-slider-value="3"
  786. data-slider-tooltip="hide" /&gt;
  787. </pre></code>
  788. </div>
  789. <div id="example-20" class="slider-example">
  790. <h3>Example 20:</h3>
  791. <p>Slider-Elements initially hidden</p>
  792. <a class="btn btn-primary" href="" id="ex20a">Show</a>
  793. <br><br>
  794. <div class="well" style="display: none">
  795. Slider-Element initially hidden, revealed by Javascript:<br/><br/>
  796. <span id="ex18-label-1" class="hidden">
  797. Example slider label
  798. </span>
  799. <input id="ex20" type="text"
  800. data-provide="slider"
  801. data-slider-ticks="[1, 2, 3]"
  802. data-slider-ticks-labels='["short", "medium", "long"]'
  803. data-slider-min="1"
  804. data-slider-max="3"
  805. data-slider-step="1"
  806. data-slider-value="3"
  807. data-slider-tooltip="hide" />
  808. </div>
  809. <h5>HTML</h5>
  810. <pre><code class="html">
  811. &lt;a class="btn btn-primary" href="" id="ex20a">Show&lt;/a&gt;
  812. &lt;div class="well" style="display: none"&gt;
  813. &lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
  814. &lt;input id="ex19" type="text"
  815. data-provide="slider"
  816. data-slider-ticks="[1, 2, 3]"
  817. data-slider-ticks-labels='["short", "medium", "long"]'
  818. data-slider-min="1"
  819. data-slider-max="3"
  820. data-slider-step="1"
  821. data-slider-value="3"
  822. data-slider-tooltip="hide" /&gt;
  823. &lt;/div&gt;
  824. </pre></code>
  825. <h5>JavaScript</h5>
  826. <pre><code class="js">
  827. $('#ex20a').on('click', function(e) {
  828. $('#ex20a')
  829. .parent()
  830. .find(' >.well')
  831. .toggle()
  832. .find('input')
  833. .slider('relayout');
  834. e.preventDefault();
  835. });
  836. </pre></code>
  837. </div>
  838. <div id="example-21" class="slider-example">
  839. <h3>Example 21:</h3>
  840. <p>Create an input element with the <strong>data-provide="slider"</strong> attribute automatically turns it into a slider. Options can be supplied via <strong>data-slider-</strong> attributes.</p>
  841. <div class="well">
  842. <input id="ex21" type="text"
  843. data-provide="slider"
  844. data-slider-ticks="[1, 2, 3]"
  845. data-slider-ticks-labels='["short", "medium", "long"]'
  846. data-slider-min="1"
  847. data-slider-max="3"
  848. data-slider-step="1"
  849. data-slider-value="3"
  850. data-slider-tooltip="hide" />
  851. </div>
  852. <h5>HTML</h5>
  853. <pre><code class="html">
  854. &lt;input id="ex21" type="text"
  855. data-provide="slider"
  856. data-slider-ticks="[1, 2, 3]"
  857. data-slider-ticks-labels='["short", "medium", "long"]'
  858. data-slider-min="1"
  859. data-slider-max="3"
  860. data-slider-step="1"
  861. data-slider-value="3"
  862. data-slider-tooltip="hide" /&gt;
  863. </pre></code>
  864. </div>
  865. <div id="example-22" class="slider-example">
  866. <h3>Example 22:</h3>
  867. <p>Highlight ranges on slider with <strong>rangeHighlights</strong> attribute</p>
  868. <div class="well">
  869. <input id="ex22" type="text"
  870. data-slider-id="slider22"
  871. data-slider-min="0"
  872. data-slider-max="20"
  873. data-slider-step="1"
  874. data-slider-value="14"
  875. data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
  876. { "start": 7, "end": 8, "class": "category2" },
  877. { "start": 17, "end": 19 },
  878. { "start": 17, "end": 24 },
  879. { "start": -3, "end": 19 }]'/>
  880. </div>
  881. <h5>HTML</h5>
  882. <pre><code class="html">
  883. &ltinput id="ex22" type="text"
  884. data-slider-id="slider22"
  885. data-slider-min="0"
  886. data-slider-max="20"
  887. data-slider-step="1"
  888. data-slider-value="14"
  889. data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
  890. { "start": 7, "end": 8, "class": "category2" },
  891. { "start": 17, "end": 19 },
  892. { "start": 17, "end": 24 }, //not visible - out of slider range
  893. { "start": -3, "end": 19 }]' /&gt;
  894. </pre></code>
  895. <h5>JavaScript</h5>
  896. <pre><code class="js">
  897. // With JQuery
  898. $('#ex22').slider({
  899. id: 'slider22',
  900. min: 0,
  901. max: 20,
  902. step: 1,
  903. value: 14,
  904. rangeHighlights: [{ "start": 2, "end": 5, "class": "category1" },
  905. { "start": 7, "end": 8, "class": "category2" },
  906. { "start": 17, "end": 19 },
  907. { "start": 17, "end": 24 },
  908. { "start": -3, "end": 19 }]});
  909. // Without JQuery
  910. var slider = new Slider("#ex22", {
  911. id: 'slider22',
  912. min: 0,
  913. max: 20,
  914. step: 1,
  915. value: 14,
  916. rangeHighlights: [{ "start": 2, "end": 5, "class": "category1" },
  917. { "start": 7, "end": 8, "class": "category2" },
  918. { "start": 17, "end": 19 },
  919. { "start": 17, "end": 24 },
  920. { "start": -3, "end": 19 }]});
  921. </pre></code>
  922. <h5>CSS</h5>
  923. <pre><code class="css">
  924. #slider22 .slider-selection {
  925. background: #81bfde;
  926. }
  927. #slider22 .slider-rangeHighlight {
  928. background: #f70616;
  929. }
  930. #slider22 .slider-rangeHighlight.category1 {
  931. background: #FF9900;
  932. }
  933. #slider22 .slider-rangeHighlight.category2 {
  934. background: #99CC00;
  935. }
  936. </pre></code>
  937. </div>
  938. <div id="example-23" class='slider-example'>
  939. <h3>Example 23:</h3>
  940. <p>Using tick marks at specific positions..</p>
  941. <div class="well">
  942. <input id="ex23" type="text"/>
  943. </div>
  944. <h5>HTML</h5>
  945. <pre><code class="html">
  946. &ltinput id="ex23" type="text" data-slider-ticks="[0, 1, 2, 3, 4]" data-slider-step="0.01" data-slider-ticks-snap-bounds="200" data-slider-ticks-tooltip="true" ticks_positions="[0, 30, 60, 70, 90, 100]" /&gt
  947. </pre></code>
  948. <h5>JavaScript</h5>
  949. <pre><code class="js">
  950. // With JQuery
  951. $("#ex23").slider({
  952. ticks: [0, 1, 2, 3, 4],
  953. ticks_positions: [0, 30, 60, 70, 90, 100],
  954. ticks_snap_bounds: 200,
  955. formatter: function(value) {
  956. return 'Current value: ' + value;
  957. },
  958. ticks_tooltip: true,
  959. step: 0.01
  960. });
  961. // Without JQuery
  962. var slider = new Slider("#ex23", {
  963. ticks: [0, 1, 2, 3, 4],
  964. ticks_positions: [0, 30, 70, 90, 100],
  965. ticks_snap_bounds: 200,
  966. formatter: function(value) {
  967. return 'Current value: ' + value;
  968. },
  969. ticks_tooltip: true,
  970. step: 0.01
  971. });
  972. </pre></code>
  973. </div>
  974. <div id="example-24" class='slider-example'>
  975. <h3>Example 24:</h3>
  976. <p>rtl mode (auto)</p>
  977. <div class='well' dir ="rtl">
  978. <span>-5</span>
  979. <input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
  980. <span>20</span>
  981. </div>
  982. <h5>HTML</h5>
  983. <pre><code class="html">
  984. &lt;div class='well' dir ="rtl"&gt;
  985. &lt;span&gt;-5&lt;/span&gt;
  986. &lt;input id="ex24" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="14"/&gt;
  987. &lt;span&gt;20&lt;/span&gt;
  988. &lt;/div&gt;
  989. </pre></code>
  990. <h5>JavaScript</h5>
  991. <pre><code class="js">
  992. // With JQuery
  993. $("#ex24").slider({});
  994. </pre></code>
  995. </div>
  996. </div> <!-- /examples -->
  997. </div> <!-- /container -->
  998. <!-- core JavaScript
  999. ================================================== -->
  1000. <script type='text/javascript' src="<%= js.jquery %>"></script>
  1001. <script type='text/javascript' src="<%= js.slider %>"></script>
  1002. <script type='text/javascript' src="<%= js.highlightjs %>"></script>
  1003. <script>hljs.initHighlightingOnLoad();</script>
  1004. <script type='text/javascript'>
  1005. $(document).ready(function() {
  1006. /* Example 1 */
  1007. $('#ex1').slider({
  1008. formatter: function(value) {
  1009. return 'Current value: ' + value;
  1010. }
  1011. });
  1012. /* Example 2 */
  1013. $("#ex2").slider({});
  1014. /* Example 3 */
  1015. var RGBChange = function() {
  1016. $('#RGB').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
  1017. };
  1018. var r = $('#R').slider()
  1019. .on('slide', RGBChange)
  1020. .data('slider');
  1021. var g = $('#G').slider()
  1022. .on('slide', RGBChange)
  1023. .data('slider');
  1024. var b = $('#B').slider()
  1025. .on('slide', RGBChange)
  1026. .data('slider');
  1027. /* Example 4 */
  1028. $("#ex4").slider({
  1029. reversed : true
  1030. });
  1031. /* Example 5 */
  1032. $("#ex5").slider();
  1033. $("#destroyEx5Slider").click(function() {
  1034. $("#ex5").slider('destroy');
  1035. });
  1036. /* Example 6 */
  1037. $("#ex6").slider();
  1038. $("#ex6").on('slide', function(slideEvt) {
  1039. $("#ex6SliderVal").text(slideEvt.value);
  1040. });
  1041. /* Example 7 */
  1042. $("#ex7").slider();
  1043. $("#ex7-enabled").click(function() {
  1044. if(this.checked) {
  1045. $("#ex7").slider("enable");
  1046. }
  1047. else {
  1048. $("#ex7").slider("disable");
  1049. }
  1050. });
  1051. /* Example 8 */
  1052. $("#ex8").slider({
  1053. tooltip: 'always'
  1054. });
  1055. /* Example 9 */
  1056. $("#ex9").slider({
  1057. precision: 2,
  1058. value: 8.115
  1059. });
  1060. /* Example 10 */
  1061. $("#ex10").slider({});
  1062. /* Example 11 */
  1063. $("#ex11").slider({
  1064. step: 20000,
  1065. min: 0,
  1066. max: 200000
  1067. });
  1068. /* Example 12 */
  1069. $("#ex12a").slider({
  1070. id: "slider12a",
  1071. min: 0,
  1072. max: 10,
  1073. value: 5
  1074. });
  1075. $("#ex12b").slider({
  1076. id: "slider12b",
  1077. min: 0,
  1078. max: 10,
  1079. range: true,
  1080. value: [ 3, 7 ]
  1081. });
  1082. $("#ex12c").slider({
  1083. id: "slider12c",
  1084. min: 0,
  1085. max: 10,
  1086. range: true,
  1087. value: [ 3, 7 ]
  1088. });
  1089. /* Example 13 */
  1090. $("#ex13").slider({
  1091. ticks: [0, 100, 200, 300, 400],
  1092. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  1093. ticks_snap_bounds: 30,
  1094. value: 200
  1095. });
  1096. /* Example 14 */
  1097. $("#ex14").slider({
  1098. ticks: [0, 100, 200, 300, 400],
  1099. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  1100. ticks_positions: [0, 30, 70, 90, 100],
  1101. ticks_snap_bounds: 20,
  1102. value: 200,
  1103. });
  1104. /* Example 15 */
  1105. $("#ex15").slider({
  1106. min: 10,
  1107. max: 1000,
  1108. scale: 'logarithmic',
  1109. step: 10
  1110. });
  1111. /* Example 16 */
  1112. $("#ex16a").slider({
  1113. min : 0,
  1114. max : 10,
  1115. value: 0,
  1116. focus: true
  1117. });
  1118. $("#ex16b").slider({
  1119. min : 0,
  1120. max : 10,
  1121. value: [ 0, 10 ],
  1122. focus: true
  1123. });
  1124. /* Example 17 */
  1125. $("#ex17a").slider({
  1126. min : 0,
  1127. max : 10,
  1128. value: 0,
  1129. tooltip_position:'bottom'
  1130. });
  1131. $("#ex17b").slider({
  1132. min : 0,
  1133. max : 10,
  1134. value: 0,
  1135. orientation: 'vertical',
  1136. tooltip_position:'left'
  1137. });
  1138. /* Example 18 */
  1139. $('#ex18a').slider({
  1140. min : 0,
  1141. max : 10,
  1142. value: 5,
  1143. labelledby: 'ex18-label-1'
  1144. });
  1145. $('#ex18b').slider({
  1146. min : 0,
  1147. max : 10,
  1148. value: [3, 6],
  1149. labelledby: ['ex18-label-2a', 'ex18-label-2b']
  1150. });
  1151. $('#ex20a').on('click', function(e) {
  1152. $('#ex20a')
  1153. .parent()
  1154. .find(' >.well')
  1155. .toggle()
  1156. .find('input')
  1157. .slider('relayout');
  1158. e.preventDefault();
  1159. });
  1160. /* Example 22 */
  1161. $('#ex22').slider({});
  1162. /* Example 23 */
  1163. $('#ex23').slider({
  1164. ticks: [0, 1, 2, 3, 4],
  1165. ticks_positions: [0, 30, 70, 90, 100],
  1166. formatter: function(value) {
  1167. return 'Current value: ' + value;
  1168. },
  1169. step: 0.01,
  1170. ticks_tooltip: true
  1171. });
  1172. });
  1173. /* example 24 */
  1174. $('#ex24').slider({});
  1175. </script>
  1176. <!-- Placed at the end of the document so the pages load faster -->
  1177. </body>
  1178. </html>