How to display current value below each element with .roundSlider()?

Question

When i change the value in one slider, it updates in all at the same time, how can i fix it? BY the way, i want to get value from element with current index of array and use it, is that possible, or exist better solution?

const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
   radius: 80,
   circleShape: "half-left",
   sliderType: "min-range",
   showTooltip: false,
   value: 150,
   width: 10,
   min: 0,
   max: 200,

   update: function (args) {
      $('.value').html(`${args.value} %`);
   }

}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />

<div class="container">
    <div class="slider"></div>
    <div class="value">0 %</div>
</div>

<div class="container">
    <div class="slider"></div>
    <div class="value">0 %</div>
</div>



 

Answer 1

The reason for the value getting update in all element is, the generic selector was used $('.value') which will update in all elements. Instead of that you can update the element based on the current target.

Also to set the value from the element, you can get the value and apply that. Check the below modified demo:

const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
   radius: 80,
   circleShape: "half-left",
   sliderType: "min-range",
   showTooltip: false,
   width: 10,
   min: 0,
   max: 200,
   
   svgMode: true,
   
   value: $(el).attr("data-value"),

   valueChange: function (args) {
      var slider = args.control;
      slider.parent().find('.value').html(`${args.value} %`);
   }

}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />

<div class="container">
    <div class="slider" data-value="50"></div>
    <div class="value">0 %</div>
</div>

<div class="container">
    <div class="slider" data-value="120"></div>
    <div class="value">0 %</div>
</div>