make a slider in javascript code example
Example 1: create a slider
<input className="newpost-rating-slider" type="range" name="rangeInput"
min="0" max="5" onChange={handleSliderRating} />
<span className="slider-rating-field">0/5</span>
const handleSliderRating = () => {
var curVal = document.querySelector('.newpost-rating-slider').value;
var sliderRatingEle = document.querySelector('.slider-rating-field');
sliderRatingEle.textContent = curVal.toString() + "/5";
}
Example 2: slideshow javascript
var slideshows = document.querySelectorAll('[data-component="slideshow"]');
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) {
var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);
var index = 0, time = 5000;
slides[index].classList.add('active');
setInterval( () => {
slides[index].classList.remove('active');
index++;
if (index === slides.length) index = 0;
slides[index].classList.add('active');
}, time);
}