Buenos días estoy intentando crear un input type range personalizado, pero ya no se como avanzar más, no comprendo aun muy bien JavaScript y no se como personalizar más.
Lo que necesito es que en azul solo se quede el seleccionado y los no seleccionados se queden con un borde gris y fondo blanco, pero no consigo ejecutarlo bien.
Adjunto foto muestra de lo que quiero.
document.querySelectorAll(".__range-step").forEach(function(ctrl) {
var el = ctrl.querySelector('input');
var output = ctrl.querySelector('output');
var newPoint, newPlace, offset;
el.oninput =function(){
// colorize step options
ctrl.querySelectorAll("option").forEach(function(opt) {
if(opt.value<=el.valueAsNumber)
opt.style.backgroundColor = '#2bb5e6';
//opt.style.border = '2px solid #2bb5e6';
else
opt.style.backgroundColor = '#fff';
opt.style.border = '2px solid #aaa';
});
// colorize before and after
var valPercent = (el.valueAsNumber - parseInt(el.min)) / (parseInt(el.max) - parseInt(el.min));
//var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+
valPercent+', #2bb5e6), color-stop('+
valPercent+', #aaa));';
el.style = style;
// Popup
if((' ' + ctrl.className + ' ').indexOf(' ' + '__range-step-popup' + ' ') > -1)
{
var selectedOpt=ctrl.querySelector('option[value="'+el.value+'"]');
output.innerText= selectedOpt.text;
output.style.left = "50%";
output.style.left = ((selectedOpt.offsetLeft + selectedOpt.offsetWidth/2) - output.offsetWidth/2) + 'px';
}
};
el.oninput();
});
window.onresize = function(){
document.querySelectorAll(".__range").forEach(function(ctrl) {
var el = ctrl.querySelector('input');
el.oninput();
});
};
.__range input
{
outline: none;
-webkit-appearance: none;
background-color: #aaa;
height: 2px;
width: 100%;
margin: 10px auto;
}
.__range input::-webkit-slider-thumb
{
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: #aaa;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.__range input::-moz-range-thumb
{
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: #aaa;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.__range input::-ms-thumb
{
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: #aaa;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.__range-step{
position: relative;
}
.__range-max{
float: right;
}
.__range-step input::-webkit-slider-thumb
{
background: transparent;
}
.__range-step input::-moz-range-thumb
{
background: transparent;
}
.__range-step input::-ms-thumb
{
background: transparent;
}
.__range-step datalist {
position:relative;
display: flex;
justify-content: space-between;
height: auto;
bottom: 16px;
/* disable text selection */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
/* disable click events */
pointer-events:none;
}
.__range-step datalist option {
width: 10px;
height: 10px;
min-height: 10px;
border-radius: 100px;
/* hide text */
white-space: nowrap;
padding:0;
line-height: 40px;
}
.__range-step-popup output
{
position: absolute;
background-color: #aaa;
width: 30px;
height: 30px;
text-align: center;
color: white;
border-radius: 100px;
display: inline-block;
font-size:12px;
bottom: 100%;
left: 0;
vertical-align: middle;
line-height: 30px;
}
.__range-step-popup .__range-output-square{
padding: 0 5px;
min-width: 25px;
width: auto !important;
border-radius: 5px !important;
}
.__range-step-popup output:after
{
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #aaa;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 90%;
left: 50%;
margin-left: -10px;
margin-top: -1px;
}
.__range-step-popup datalist{
overflow:hidden;
}
.__range-step{
margin: 0 40px;
}
.__range-step-popup{
margin:40px 40px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="espacio_opciones range_options">
<h3>Calidad</h3>
<div class="__range __range-step">
<input value="2" type="range" max="3" min="1" step="1" list="ticks1">
<datalist id="ticks1">
<option value="1">Now</option>
<option value="2">1 mth</option>
<option value="3">2 mth</option>
</datalist>
</div>
</div>
El ejemplo lo cogí de esta pregunta aquí
style
no está definida