How to add some text labels to roundSlider

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>

Solution

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>