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:

roundSlider 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>

You need to insert text at the position where zero is at ? – strek Aug 15 '19 at 17:09 — strek, Aug 15 '19 at 17:09
@XxSTREKxX, I am not sure if I understand your question? – Aug 15 '19 at 17:14 — , Aug 15 '19 at 17:14

strek · Accepted Answer · 2019-08-16T05:20:54.140

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>

Thanks for your help. Your code is good for one roundSlider, what if I have multiple sliders as I mentioned in my question above? I added another 3 sliders script, check it please. — , Aug 15 '19 at 17:26
@muneers i just updated the answer too it will work for any number of sliders — strek, Aug 15 '19 at 17:38
Kindly, one more little thing and will be done with it, I just wonder how to make a space between each other. They just look like stuck to each other, I want to separate them from each other a little bit. — , Aug 15 '19 at 19:10
would you please take a look at my new thread about sliders: https://stackoverflow.com/questions/57792647/how-to-add-a-enable-disable-button-to-the-roundslider-widget — , Sep 04 '19 at 18:59

score 1 · Answer 2 · answered Aug 16 '19 at 18:16

1

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...

answered Aug 16 '19 at 18:16

Soundar

2,569
1
16
24

Thanks for the valuable input. – Aug 16 '19 at 21:08
would you please take a look at my new thread about sliders: https://stackoverflow.com/questions/57792647/how-to-add-a-enable-disable-button-to-the-roundslider-widget – Sep 04 '19 at 19:00

score 0 · Answer 3 · answered Aug 15 '19 at 17:20

0

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

answered Aug 15 '19 at 17:20

N Kiran Kumar Kowlgi

110
1
2
9

would you please apply your solution to my three sliders example above, I tried it but didn't work. Thanks. – Aug 15 '19 at 18:21
$("#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); }, create: function(event) {$(".rs-tooltip-text").append("
test");} }); – N Kiran Kumar Kowlgi Aug 15 '19 at 21:55
that was cool, but the problem is when I drag the slider the text disappears! – Aug 16 '19 at 04:24
Just apply the same to onchange event as well like below – N Kiran Kumar Kowlgi Aug 17 '19 at 05:04
change: function(event) { $.getJSON('/set_my_number/' + event.value); $(".rs-tooltip-text").append("
test");}, create: function(event) {$(".rs-tooltip-text").append("
test");} – N Kiran Kumar Kowlgi Aug 17 '19 at 05:05

How to add some text labels to roundSlider

3 Answers3

Some use-case demos: