How to create a curved slider?

Question

I am trying to create a curved slider with jquery as follows:

without success.

can anyone point in the right direction?

Thank. Avi

Answer 1

This is what you want for sure. Using the jQuery roundSlider plugin , you can make any type of slider with a custom look.

Please check this jsFiddle to demonstrate your requirement.

Live demo:

$("#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>

Run code

Exit Screenshots:

To learn more about roundSlider , check out the demos and 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 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 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

An alternative way to use this plugin for a rounded / 360-degree slider

Link

Here is the code:

<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);

Check here for the demo Demo