<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tick_marks_labels</title> <link rel="stylesheet" href="bootstrap-slider-master/dist/css/bootstrap-slider.css"> <script src="bootstrap-slider-master/dependencies/js/jquery.min.js"></script> <script src="bootstrap-slider-master/dist/bootstrap-slider.js"></script> <style> #ex1Slider .slider-selection { background: #BABABA; } </style> </head> <body> <input id="ex13" type="text"/> <script> // 参考:https://seiyria.com/bootstrap-slider/#example-13 // html标签内的用法: // With JQuery $("#ex13").slider({ ticks: [0, 100, 200, 300, 400], // 刻度(圆)点。 ticks_labels: ['$0', '$100', '$200', '$300', '$400'], // 刻度标识 ticks_snap_bounds: 30 // 刻度边界,即,在某刻度点两侧的该数值范围内,滑块停留在该刻度点,而不滑动。 }); // // Without JQuery // var slider = new Slider("#ex13", { // ticks: [0, 100, 200, 300, 400], // ticks_labels: ['$0', '$100', '$200', '$300', '$400'], // ticks_snap_bounds: 30 // }); </script> </body> </html>
bootstrap-slider tick_marks_labels.html
最新推荐文章于 2022-07-16 10:21:35 发布