How can i apply .roundSlider() to all elements of Array?

Question

With one element all right, but here throwing error "el.roundSlider is not a function", Jquery connected before main js file, With Jquery .each the same thing

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
 }));

<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="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

Answer 1

$(el) seems to do the trick:

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
 }));

<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="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

Each element inside of a jquery array isn't a jquery object, it's actually a node element I believe. Try this in your browser: $('p')[0] instanceof Element

Answer 2

Just use the jquery class selector directly

$('.slider').roundSlider({
  radius: 80,
  circleShape: "half-left",
  sliderType: "min-range",
  showTooltip: false,
  value: 150,
  width: 10,
  min: 0,
  max: 200
});

<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="slider"></div>
<div class="slider"></div>
<div class="slider"></div>