如何创建弯曲滑块？

Question

我正在尝试用这样的jquery创建一个弯曲的滑块:

没有成功.

任何人都可以指向正确的方向吗？

谢谢分享Avi

Answer 1

这正是你想要的.通过使用jQuery roundSlider插件,您可以使用自定义外观制作任何类型的弧形滑块.

请查看此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的更多信息,请查看演示和文档页面.