Sliders allow users to make selections from a range of values.

To use the slider, you need to add the class slider-container to the containing div & class slider with ID myRange.

To show the value of the slider, the component library uses JS, and the output is shown in the element with the ID myRange-output

<div class="slider-container">
<input type="range" min="1" max="100" value="50" 
class="slider" id="myRange">
<p class="para-m" id="myRange-output"></p>
</div>

The JS code for the slider

const slider = document.getElementById("myRange");
const output = document.getElementById("myRange-output");
output.innerHTML =`Value: ${slider.value}`;

slider.addEventListener("input", ()=>{
   output.innerHTML = `Value: ${slider.value}`;
   console.log(slider.value)
});