roundSlider是一个jQuery插件,用于将DIV元素转换为圆形范围滑块,它可以帮助您通过鼠标拖动来滑动值的范围
1.在安装了jQuery库的网页中包含jQuery roundSlider插件的样式表和JS文件。
<script src="jquery.min.js"></script> <link href="src/roundSlider.css" rel="stylesheet" /> <script src="src/roundSlider.js"></script>
2.为圆形范围滑块创建一个DIV元素。
<div id="demo"></div>
3.调用DIV元素上的插件,生成一个完整圆形的默认范围滑块。
$("#demo").roundSlider({ // options here });
4.该插件提供了大量选项,可以帮助您自定义范围滑块。以下是具有默认值的完整选项列表。
// min / max value min: 0, max: 100, // custom step step: 1, // initial value value: null, // customize the slider radius: 85, width: 18, // the below props are relative to "width" when you provide the value starts with "+" or "-" // otherwise if you provide any number then it will take the exact value pathWidth: "+0", handleSize: "+0", startAngle: 0, endAngle: "+360", // enable animation animation: true, // enable tooltip showTooltip: true, editableTooltip: true, // read-only mode readOnly: false, // disabled mode disabled: false, // allow for keyboard interaction keyboardAction: true, // enable mousel scroll action mouseScrollAction: false, // square, or round lineCap: "butt", // default, min-range or range sliderType: "default", // full, quarter-top-left, quarter-top-right, quarter-bottom-right, // quarter-bottom-left, half-top, half-bottom, half-left, half-right, // pie, custom-half, custom-quarter circleShape: "full", // round, dot, or square handleShape: "round", // the 'startValue' property decides at which point the slider should start. // otherwise, by default the slider starts with min value. this is mainly used // for min-range slider, where you can customize the min-range start position. startValue: null, allowInvertedRange: false, handleRotation: false, snapToStep: true, // SVG related properties svgMode: true, borderWidth: 1, borderVisibility: "both", borderColor: "#AAA", pathColor: "#FFF", rangeColor: "#54BBE0", handleColor: null, tooltipColor: null, // events beforeCreate: null, create: null, start: null, beforeValueChange: null, drag: null, change: null, update: null, valueChange: null, stop: null, tooltipFormat: null
5.API方法。
2022-01-24
2.0.0版alpha(2021-09-06)
v1.6.1 (2020-07-04)
v1.6.0 (2020-06-08)
v1.5.2 (2020-05-13)
v1.5.1 (2020-04-23)
v1.5.0 (2020-04-18)
v1.4.1 (2020-03-25)
v1.4.0 (2020-01-29)
2019-01-17
2018-04-22
2016-02-29
2016-02-09
2016-01-31
2016-01-24
2016-01-04
2015-11-28
2015-11-26
2015-10-26
2015-10-21
2015-10-20
2015-10-12
2015-08-02