CSS圆形滑块

Question

制作圆形滑块的最简单方法是什么？给出这样的输入：

<input type="range" id="myRange" value="1" max="100">

这只是常规的直接输入范围，我正在尝试执行以下操作：

这只能用CSS来完成吗，或者我需要JavaScript来完成此任务？如果是的话，是否有任何易于阅读的示例？顺便说一下，没有jQuery。预先感谢。

Answer 1

说明：-您需要使用jquery，roundslider.css和roundslider.js

// you need to bind `.roundSlider()` with the `id = 'myRange'`.
$("#myRange").roundSlider({
    sliderType: "min-range",
    handleShape: "round",
    width: 22, // width of the roundSlider
    radius: 100, // radius size
    value: 60 // value you want to apply
});

$("#myRange1").roundSlider({
    width: 22, // width of the roundSlider
    radius: 100, // radius size
    value: 60 // value you want to apply
});

#myRange {
    margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.js"></script>
<input type="range" id="myRange">
<input type="range" id="myRange1">