)0Q4827WZ4C29GTKRAS8~U9.png

round-slider-jq版

第一版使用的是round-slider

https://github.com/soundar24/roundSlider

https://roundsliderui.com/demos.html

round-slider webcomponent版

https://github.com/thomasloven/round-slider

选择使用echarts的原因

echarts 兼容ie8

参考文章

(4条消息) 鼠标事件MouseEvent对象的一些坐标属性总结_小赛赛爱吃肉-CSDN博客_mouseevent撖寡情
https://blog.csdn.net/actionActivity/article/details/103908842

pageX、pageY、screenX、screenY

pageX、pageY 是相对于页面左上角的距离
screenX、screenY 是相对于屏幕左上角的距离
532155d2a2d3c65280030121d887fb03_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FjdGlvbkFjdGl2aXR5,size_16,color_FFFFFF,t_70.png

clientX、clientY、x、y

返回当前点击的位置到可视区域的顶部和左侧的距离
01402beac37c3c5cb72f5aa376849c6c_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FjdGlvbkFjdGl2aXR5,size_16,color_FFFFFF,t_70.png

offsetX、offsetY

相对于目标元素e.target 的左上角距离
8f0482d51774ff125e3a495e32808495_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FjdGlvbkFjdGl2aXR5,size_16,color_FFFFFF,t_70.png

input的range

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range
range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。

验证方式

没有可用的模式验证。但是，执行以下形式的自动验证：

如果将 value 设置为无法转换为有效浮点数的值，则验证将失败，因为输入正遭受错误的输入。
该值不得小于 min. 默认值为0。
该值将不大于 max. 默认值为100。
该值将是 step. 预设值为1。
值
value 属性包含一个 DOMString 该属性包含所选数字的字符串表示形式。该值绝不能为空字符串 (“”). 默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 min 属性的值。确定默认值的算法是： ```typescript defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

如果尝试将值设置为小于最小值，则将其设置为最小值。 类似地，尝试将值设置为大于最大值会导致将其设置为最大值。<br />除了所有 [<input>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input) 元素共享的属性之外，范围输入还提供以下属性：
| 属性 | 描述 |
| --- | --- |
| [list](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#list) | <datalist>元素的ID，其中包含可选的预定义选项 |
| [max](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#max) | 最大允许值 |
| [min](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#min) | 最小允许值 |
| [step](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#step) | 步进间隔，用于用户界面和验证目的 |
<a name="Y0Kgb"></a>
### [list](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#list)
The values of the list attribute is the [id](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) of a [<datalist>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) element located in the same document. The [<datalist>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type) are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.<br />有关在支持的浏览器中如何表示范围中的选项的示例，请参见下面的[带散列的标记范围控制](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#a_range_control_with_hash_marks)
<a name="WEHB3"></a>
### [max](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#htmlattrdefmax)
允许值范围内的最大值。 如果输入到元素中的[value](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-value)超过此值，则元素将无法通过[约束验证](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation)。  如果 [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) 属性的值不是数字，则元素没有最大值。<br />此值必须大于或等于min属性的值。 请参见 [HTMLmax](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max)属性。
<a name="qQwvw"></a>
### [min](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#htmlattrdefmin)
允许值范围内的最小值。 如果元素的[value](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-value) 小于此值，则该元素将无法通过 [约束验证](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation)。如果为min 指定的值不是有效数字，则输入没有最小值。<br />该值必须小于或等于max属性的值。 请参见 [HTMLmin属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min)。
<a name="PTn7L"></a>
### [step](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#htmlattrdefstep)
{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}<br />range 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 min 设置为-10并将 value 设置为1.5，则1的 step 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅[HTMLstep属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)。
<a name="a9WRN"></a>
### [非标准属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#%E9%9D%9E%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)
| 属性 | 描述 |
| --- | --- |
| [orient](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#orient) | 设置范围滑块的方向。 **仅限Firefox .** |
[orient](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#attr-orient)** **<br />类似于-moz-orient非标准CSS属性会影响 [<progress>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress) 和 [<meter>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meter) 元素， orient 属性定义范围滑块的方向。 值包括 horizontal, 表示范围是水平呈现， 和 vertical, 其中范围是垂直呈现）。<br />注意：以下输入属性不适用于输入范围：accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget,高度, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, 和 width. 这些属性中的任何一个（如果包含）将被忽略。
<a name="dGRzZ"></a>
### [设置值的粒度](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range#%E8%AE%BE%E7%BD%AE%E5%80%BC%E7%9A%84%E7%B2%92%E5%BA%A6)
默认情况下，粒度为1，表示该值始终是整数。 您可以更改 [step](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes#attr-step) 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 step 的值设置为0.01:
```typescript
<input type="range" min="5" max="10" step="0.01">