在jquery旋钮中绘制圆圈光标

Question

我想做这样的事情，但我不知道怎么做。请帮帮我，告诉我在旋钮插件中画圆圈光标的路径。

提前致谢

Answer 1

您可以使用jQuery roundSlider插件来满足此要求。因此，您可以根据您的要求自定义外观和功能。

以下是与您的要求相同的演示：jsFiddle

<强>截图：

有关详细信息，请查看demos和documentation页。

[更新了代码]

＆＃13;

＆＃13;

$("#slider").roundSlider({
    sliderType: "min-range",
    handleShape: "round",
    width: 8,
    radius: "80",
    handleSize: "+10",
    startAngle: 270,
    editableTooltip: false,
    min: 1,
    max: 12,
    
    tooltipFormat: function(args) {
     	return args.value + " Hour";   
    }
});
$("#slider").roundSlider({ value: 4 });

＆＃13;

.rs-control .rs-range-color {
    background-color: #ff9700;
}
.rs-control .rs-path-color {
    background-color: #5b4b28;
}
.rs-control .rs-handle {
    background-color: #7dc98f;
}
.rs-border {
    border-width: 0;
}
.rs-tooltip-text {
    font-size: 28px;
    color: #5B4B28;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>

<div id="slider"></div>

＆＃13;

＆＃13;

＆＃13;