javascript - 如何创建弧形 slider ？

Question

我正在尝试使用 jquery 创建一个弯曲的 slider ，如下所示:

没有成功。

谁能指出正确的方向？

谢谢分配视频

Answer 1

这正是您想要的。通过使用 jQuery roundSlider插件，您可以制作任何类型的具有自定义外观的弧形 slider 。

请检查这个jsFiddle用于演示您的要求。

现场演示:

$("#arc-slider").roundSlider({
    sliderType: "min-range",
    circleShape: "custom-quarter",
    value: 75,
    startAngle: 45,
    editableTooltip: true,
    radius: 350,
    width: 6,
    handleSize: "+32",
    tooltipFormat: function (args) {
        return args.value + " %";
    }
});

#arc-slider {
    height: 110px !important;
    width: 500px !important;
    overflow: hidden;
    padding: 15px;
}
#arc-slider .rs-container {
    margin-left: -350px; /* here 350 is the radius value */
    left: 50%;
}
#arc-slider .rs-tooltip {
    top: 60px;
}
#arc-slider .rs-tooltip-text {
    font-size: 25px;
}
#arc-slider .rs-border{
    border-width: 0px;
}

/* Appearance related changes */
.rs-control .rs-range-color {
    background-color: #54BBE0;
}
.rs-control .rs-path-color {
    background-color: #5f5f5f;
}
.rs-control .rs-handle {
    background-color: #51c5cf;
}

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

<div id="arc-slider" class="rslider"></div>

输出截图:

了解更多关于 roundSlider 的信息, 请查看demos和 documentation页面。