Instead of developing your own plugin, if you are comfortable to use the roundSlider plugin then I made a demo for your requirement.
Since writing the custom logic involves more code and check points to consider.
Check the below demo, still you can do a lot of more customization.
DEMOScreenshot:
If you can’t use any 3rd party library for that I think you might be interested in this
The worst part will be dragging button so it only can move along the circle border
Here’s a bit of fiddle
$(function() {
const svg = document.querySelector("svg");
const circleButton = document.querySelector("#circle-button");
const circle = document.querySelector("#circle2");
const baseX = Number(circle.getAttributeNS(null, "cx"));
const baseY = Number(circle.getAttributeNS(null, "cy"));
const radius = Number(circle.getAttributeNS(null, "r"));
let sliderHandle = null;
let value = 0;
let chunk = Math.PI * radius * 2 / 10;
$("#start").click(function() {
if(sliderHandle) {
$(this).text('Start Slider');
clearTimeout(sliderHandle);
sliderHandle = null;
return;
}
const loop = () => {
circle.setAttributeNS(null, "stroke-dashoffset", value);
value = value - chunk;
sliderHandle = setTimeout(loop, 500);
}
$(this).text('Stop Slider');
sliderHandle = setTimeout(loop, 500);
})
let handle = null;
$("#move-button").click(function() {
if(handle) {
clearTimeout(handle);
handle = null;
$(this).text('Move Button');
return;
}
$(this).text('Stop Button');
runTimer();
})
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);
function getMousePosition({clientY, clientX}) {
const {a, d, e, f} = svg.getScreenCTM();
return {
x: (clientX - e) / a,
y: (clientY - f) / d
};
}
let offset = {
x: -1,
y: -1
}
let isDragging = false;
let selectedElement = null;
function startDrag(event) {
selectedElement = event.target;
isDragging = true;
offset = getMousePosition(event);
offset.x -= parseFloat(circle.getAttributeNS(null, "cx"));
offset.y -= parseFloat(circle.getAttributeNS(null, "cy"));
}
function drag(event) {
if(!isDragging) {
return;
}
event.preventDefault();
const coord = getMousePosition(event);
const cx = coord.x - offset.x;
const cy = coord.y - offset.y;
selectedElement.setAttributeNS(null, "cx", cx);
selectedElement.setAttributeNS(null, "cy", cy);
}
const inc = Math.PI / 90;
let t = 0;
function runTimer() {
const loop = () => {
const cx = baseX + radius * Math.cos(t);
const cy = baseY + radius * Math.sin(t);
t = t + inc;
circleButton.setAttributeNS(null, "cx", cx);
circleButton.setAttributeNS(null, "cy", cy);
handle = setTimeout(loop, 100);
}
handle = setTimeout(loop, 100);
}
function endDrag(event) {
selectedElement = null;
isDragging = false;
}
})#circle2, #circle-button {
transition: all .2s ease-in;
}
#circle-button {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg
width="200" height="200">
<circle
cx="100" cy="100" r="50"
fill="none"
stroke="gray"
stroke-width="10"
></circle>
<circle
id="circle2"
cx="100" cy="100" r="50"
fill="none"
stroke="red"
stroke-width="10"
stroke-dasharray="320"
stroke-dashoffset="0"></circle>
<circle
id="circle-button"
cx="150"
cy="100"
r="12"
fill="black"></circle>
</svg>
<button id="start">Start Slider</button>
<button id="move-button">Move Button</button>Happy coding!
I want to make a round slider with 4 different colors, basically, the round slider should be four-part, each part represents 25% with different colors, when someone triggers 25% then slider color should be changed and its value in the text should be changed too, like if the first part background color is red then its text is name1, the second part background color should be green and its text is name2 and third and fourth part should also have different colors and text.
For reference, please see the image, I want to implement the same functionality like in attached image, can you please help, how I can develop it?
I think