After browsing through various sliders on CodePen, I stumbled upon the Range Slider created by cturney that fits my requirements perfectly. However, I have a few tweaks in mind for this range slider. I would like to add a "Submit" button that displays each result as images instead of numerical values. Below is an image example to illustrate what I have in mind :)
https://i.sstatic.net/TRME9.jpg
Here is the code snippet that I've been working on:
// To make it easier to follow along, I have added annotations to this code snippet. Feel free to explore and check out my other pens if you find this helpful
// Let's start by setting the colors for our sliders
const settings={
fill: '#1abc9c',
background: '#d7dcdf'
}
// First, locate all sliders on the page
const sliders = document.querySelectorAll('.range-slider');
// Loop through the list of sliders
Array.prototype.forEach.call(sliders,(slider)=>{
// Find the input element inside each slider and attach an event listener
slider.querySelector('input').addEventListener('input', (event)=>{
// Update the numeric value display
slider.querySelector('span').innerHTML = event.target.value;
// Apply the color fill to the slider
applyFill(event.target);
});
// Apply the fill immediately
applyFill(slider.querySelector('input'));
});
// Function to apply the color fill using linear gradient
function applyFill(slider) {
// Convert the value into a percentage
const percentage = 100*(slider.value-slider.min)/(slider.max-slider.min);
// Create a linear gradient based on the percentage
const bg = `linear-gradient(90deg, ${settings.fill} ${percentage}%, ${settings.background} ${percentage+0.1}%)`;
slider.style.background = bg;
}<p>Role Match</p>
<div class="range-slider">
<input class="range-slider__range" type="range" value="4" min="0" max="10">
<span class="range-slider__value">4</span>
</div>
<p>Availability</p>
<div class="range-slider">
<input class="range-slider__range" type="range" value="5" min="0" max="10" step="1">
<span class="range-slider__value">5</span>
</div>
<p>Skills Match</p>
<div class="range-slider">
<input class="range-slider__range" type="range" value="6" min="0" max="10">
<span class="range-slider__value">6</span>
</div>
<p>Custom Field Match</p>
<div class="range-slider">
<input class="range-slider__range" type="range" value="7" min="0" max="10">
<span class="range-slider__value">7</span>
</div>