如何创建一个弯曲的滑块？

Question

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

没有成功。

谁能指出正确的方向？

感谢分配 视频

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的信息，请查看demos和documentation页面。

Answer 2

请检查此LINK，您将获得足够的滑块详细信息。

'slide': function(e, ui){
var percentLeft;
var submitValue;
var Y = ui.value - 100; //Find center of Circle (We're using a max value and height of 200)
var R = 100; //Circle's radius
var skip = false;

$(this).children('.ui-slider-handle').attr('href',' UI.val = ' + ui.value);

//Show default/disabled/out of bounds state
if ( ui.value > 0 && ui.value < 201 ) { //if in the valid slide rang
$(this).children('.ui-slider-handle').addClass('is-active');
}
else {
$(this).children('.ui-slider-handle').removeClass('is-active');
}

//Calculate slider's path on circle, put it there, by setting background-position
if ( ui.value >= 0 && ui.value <= 200 ) { //if in valid range, these are one inside the min and max
var X = Math.sqrt((R*R) - (Y*Y)); //X^2 + Y^2 = R^2. Find X.
if ( X == 'NaN' ) {
percentLeft = 0;
}
else {
percentLeft = X;    
}
}
else if ( ui.value == -1 || ui.value == 201 ) {
percentLeft = 0;
skip = true;
}
else {
percentLeft = 0;
}

//Move handle
if ( percentLeft > 100 ) { percentLeft = 100; }
$(this).children('.ui-slider-handle').css('background-position',percentLeft +'% 100%'); //set new css sprite, active state

//Figure out and set input value
if ( skip == true ) {
submitValue = 'fail';
$(this).children('.ui-slider-handle').css('background-position',percentLeft +'% 0%'); //reset css sprite
}
else {
submitValue = Math.round(ui.value / 2); //Clamp input value to range 0 - 100
}   
$('#display-only input').val(submitValue); //display selected value, demo only
$('#slider-display').text(submitValue); //display selected value, demo only
$(this).prev('.slider-input').val(ui.value); //Set actual input field val. jQuery UI hid it for us, but it will be submitted.
}

你也可以试试这个LINK。

如果您需要任何其他帮助，请添加评论。

问候 D.

Answer 3

您可以将此插件用于弯曲/360 度滑块的另一种方式

Reference

代码如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/round-slider.min.js"></script>

 <div class="box dotted">
 <div class="left">
 <div id="degrees" class="demo"></div>
 </div>
 <div class="right">
 <p class="name">Degrees</p>
 <p id="degrees-data"></p>
 </div>
 </div>

Javascript

 (function($){
 'use strict';

 var set_html = function(value, index, angle, unit){

 var html = ''
,val = value;

 if(unit !== ''){
 val += unit;
 }

 html += '<b>Value: </b>' + val + '<br/>';
 html += '<b>Index: </b>' + index + '<br/>';
 html += '<b>Angle: </b>' + angle + '<br/>';

 return html;
 };

 $('document').ready(function(){

 var self = {
 degrees: null
 };


 self.degrees = $('#degrees').round_slider({
 min: 0,
 max: 359,
 unit_sign: '\u00b0',

 bg: 'img/bg/degrees-theme.png',
 handle_bg: 'img/handles/wheel-33-33.png',
 input_bg: 'img/input/round-50.png',
 points_bg: 'img/points/degress-white.png',

 angle_changed_callback: function(value, index, angle, unit){
 $('#degrees-data').html(set_html(value, index, angle, unit));
 }
 });
 });

 })(jQuery);

在此处查看演示 Demo