如何给 roundSlider 添加一些文本标签

Question

下面是我为 roundSlider 小部件编写的 html 脚本，我试图将一些标签文本添加到该小部件中，但无法弄清楚。因为我的项目需要多个小部件，所以我必须给每个小部件一个不同的 label/name。

在下面的附图中，这就是我想添加这些标签的地方

拜托，我们将不胜感激。谢谢

html 脚本：

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

图片：

roundSlider Image

三轮幻灯片：

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

Answer 1

删除绝对位置，以便您的文本显示在滑块之后。希望这是您所期望的。

如果您使用多个滑块，请使用 flex 为滑块和段落添加多个具有一个父项的滑块div

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

Answer 2

只需在更改事件后对 roundSlider 的调用中使用以下内容

create: function(event) {$(".rs-tooltip-text").append("<br/><span>test</span>");}

只是对现有工具提示使用 class 并在其后附加一些 html

Answer 3

在 roundSlider 中，你有 tooltipFormat 属性，你可以通过它制作任何自定义工具提示文本或元素。

参考以下演示：

https://jsfiddle.net/soundar24/deLqk8sr/

https://jsfiddle.net/soundar24/deLqk8sr/1

https://jsfiddle.net/soundar24/deLqk8sr/131/

https://roundsliderui.com/demos.html#custom-tooltip

一些用例演示：

https://jsfiddle.net/soundar24/j7ady5o8/

https://jsfiddle.net/soundar24/jwjwrLw7/

希望对您有所帮助...

如何给 roundSlider 添加一些文本标签

How to add some text labels to roundSlider

html

javascript

round-slider

一些用例演示：