Below, is the html script that I have for the roundSlider widget, I was trying to add some label text into this widget but couldn't figure it out. Since I will need multiple widgets of those for my project, I will have to give each one a different label/name.
In the below attached image, thats where I am thinking of adding these labels
Please, any help would be highly appreciated. Thanks.
html script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.col1 {left:75px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<!-- <p>Slider</p> -->
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>Image:
Three roundSlides:
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.row2 {top:450px;}
.row3 {top:750px;}
.col1 {left:75px;}
.col2 {left:470px;}
.col3 {left:870px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<div id="slider2" class='slider row1 col2'></div>
<div id="slider3" class='slider row1 col3'></div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) { $.getJSON('/set_abcd/' + event.value); }
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) { $.getJSON('/set_fghkva/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
Remove the position absolute so that your text appears after the slider. Hope this is what you expected.
If you are using multiple sliders use flex to add numerous sliders with one parent div for both the slider and paragraph