How to add some text labels to roundSlider
Question
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>
3 answers
solution1
3 ACCPTED 2019-08-15 17:18:25
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
<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> .container { display: flex; } .child { margin-left:100px; } </style> <body> <div class="container"> <div class="child"> <div id="slider1" class='slider row1 col1'></div> <center> <p>slider1</p> </center> </div> <div class="child"> <div id="slider2" class='slider row1 col2'></div> <center> <p>slider1</p> </center> </div> <div class="child"> <div id="slider3" class='slider row1 col3'></div> <center> <p>slider1</p> </center> </div> </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>
solution2
0 2019-08-15 17:20:53
Just use the below inside the call to roundSlider after the change event
create: function(event) {$(".rs-tooltip-text").append("<br/><span>test</span>");}
just uses the class for the existing tooltip and appends some html after that
solution3
0 2019-08-16 18:16:30
In roundSlider you have the tooltipFormat property, through which you can make any custom tooltip text or element.
Refer the below demos:
https://jsfiddle.net/soundar24/deLqk8sr/
https://jsfiddle.net/soundar24/deLqk8sr/1
https://jsfiddle.net/soundar24/deLqk8sr/131/
https://roundsliderui.com/demos.html#custom-tooltip
Some use-case demos:
https://jsfiddle.net/soundar24/j7ady5o8/
https://jsfiddle.net/soundar24/jwjwrLw7/
Hopes this helps you...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.