roundslider - example

A free jQuery plugin and also can call as radial slider and circular slider. For more info please visit: http://roundsliderui.com/

by D S

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<div id="slider"></div>
<button class="btn">click</button>

CSS

.rs-control .rs-range-color {
    background-color: #54BBE0;
}
.rs-control .rs-path-color {
    background-color: white;
}
.rs-control .rs-handle {
    background-color: #838383;
}
.rs-control .rs-bg-color {
    background-color: white;
}

JavaScript

$("#slider").roundSlider({
    width: 8,
    radius: "100",
    handleSize: "24,24",
    value: 0,
    max: "100",
    startAngle: 90,
    step: "0.005",
    showTooltip: false,
    editableTooltip: false,
    sliderType: "min-range",

    drag: function (args) {
        seek(args);
    },
    change: function (args) {
        // handle the change event here
        seek(args);
    }
});
//$("#slider").roundSlider();

$(".btn").on("click", function(){
	$("#slider").roundSlider("option", "value", 50);
  
  audio.pause();
});

var audio, src;
src = "https://goo.gl/2sNdqY";
audio = new Audio();
audio.src = src;
audio.play();
//audio.muted = true;

$(audio).on("timeupdate", function(){
	seektimeupdate();
});

function seektimeupdate(){
	var nt = audio.currentTime * (100 / audio.duration);
		$("#slider").roundSlider("option", "value", nt);
}
function seek(event){
  var val = event.value;
  $("#slider").roundSlider("option", "value", val);
  seekto = audio.duration * (val / 100);
  audio.currentTime = seekto;
}