0

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.

introducir la descripción de la imagen aquí

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í

4
  • Debe haber alguna errata en el código, al ejecutarlo da un error: la variable style no está definida Commented el 25 feb. 2022 a las 14:12
  • Si, pero eso no afecta a lo que quiero conseguir
    – Miguel
    Commented el 25 feb. 2022 a las 14:13
  • Serviría de mucho si agregas un enlace de donde tomaste la idea, tal vez así podamos ver lo que está fallando.
    – Triby
    Commented el 25 feb. 2022 a las 17:01
  • Hola @Triby acabo de poner en la pregunta de donde cogí el ejemplo, pero ahí se iluminan todos los rangos, yo quiero conseguir algo como la imagen de muestra
    – Miguel
    Commented el 28 feb. 2022 a las 12:46

1 respuesta 1

1
+50

Buen día,

Lo que debes cambiar está en este if, está comparando el valor menor o igual al seleccionado <= si lo cambias por == ya funciona como deseas

if(opt.value == el.valueAsNumber)     //<<---- Aquí cambié <= por ==      
    opt.style.backgroundColor = '#2bb5e6';
    //opt.style.border = '2px solid #2bb5e6';
else
    opt.style.backgroundColor = '#fff';
    opt.style.border = '2px solid #aaa';
});           

Ejemplo completo funcionando

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)   //<<---- Aquí cambié <= por ==              
                    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>

5
  • Hol y gracias por tu respuesta, funciono perfecto y que facil era hacerlo. Una pregunta y si tengo más de un rangue como puedo hacer para que funcionen los dos?
    – Miguel
    Commented el 1 mar. 2022 a las 12:36
  • Esque @HeytalePazguato si hago un console log console.log(el.valueAsNumber); si que me va sacando por la consola los valores de los dos type rangue pero no me pinta de azul en el segundo rangue
    – Miguel
    Commented el 1 mar. 2022 a las 12:38
  • Buen día, la razón por la que no puedes ver los valores del segundo range es porque en la linea ` //el.style = style;` la variable style no está definida, comenta esa línea y te va a funcionar. Es lo que te comentaba Pablo. Commented el 1 mar. 2022 a las 12:57
  • Ya probe eso, de hecho todo eso esta quitado, parece más ser por los steps
    – Miguel
    Commented el 1 mar. 2022 a las 12:57
  • Ya lo tengo solucionado, gracias por todo! ;)
    – Miguel
    Commented el 1 mar. 2022 a las 12:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.