I would like your support to modify the styles of my input range. I used some examples that I found but I want to assign them with an ID because I would like to add more input range and they all have the same format. I would also like to add "tickmarks" with its label but because of the styles they do not appear
var slider = document.getElementById("vol");
var output = document.getElementById("outvol");
var outputimagen = document.getElementById("imagen");
let estado = 'Escala Análisis de Sanidad Vegetal';
output.innerHTML = estado;
slider.oninput = function() {
correlacion_valores = {
'0': 'Suelo desnudo',
'0.1': 'Vegetación muerta',
'0.2': 'Estrés hídrico',
'0.3': 'Daños por presencia de plagas y/o enfermedades',
'0.4': 'Deficiencia fuerte de nutrientes',
'0.5': 'Presencia de plagas y/o enfermedades',
'0.6': 'Deficiencia nutrientes',
'0.7': 'Buena condición de producción',
'0.8': 'Excelente condición de producción',
'0.9': 'Excelente condición de producción',
}
correlacion_imagenes = {
'0': 'https://previews.123rf.com/images/oocoskun/oocoskun1610/oocoskun161000016/65788157-antecedentes-de-suelo-desnudo-con-copia-espacio-para-los-conceptos-sobre-la-jardiner%C3%ADa-la-horticultu.jpg',
'0.1': 'https://media.istockphoto.com/photos/corn-crop-or-withered-crop-due-to-climate-change-picture-id1175270373?s=2048x2048',
'0.2': 'https://www.eldiariodelcentrodelpais.com/wp-content/uploads/2018/03/p18-f1-rural.jpg',
'0.3': 'https://www.gob.mx/cms/uploads/image/file/640818/plaga1.jpg',
'0.4': 'https://www.dekalb.es/documents/89430/235900/05.jpg/5c235181-bb6a-4a35-a119-00ce2af11141?t=1423645241000',
'0.5': 'https://www.gob.mx/cms/uploads/image/file/640819/Puccinia-sorgui.jpg',
'0.6': 'https://www.dekalb.es/documents/89430/235900/06.jpg/947424ac-bae0-4aca-9166-b83308c7f8ae?t=1423645241000',
'0.7': 'https://agrotendencia.tv/agropedia/wp-content/uploads/2019/04/maiz1.jpg',
'0.8': 'https://www.intagri.com/assets/images/articulos/categoria1/9Cereales/art202-alto-rendimiento-en-maiz/proporcion.jpg',
'0.9': 'https://webcdn.agroptima.com/wp-content/uploads/2016/03/20121440/cultivo-maiz1.jpg',
}
estado = correlacion_valores[this.value];
imagen = correlacion_imagenes[this.value];
output.innerHTML = estado;
outputimagen.setAttribute("src", imagen)
};
input[type=range] {
-webkit-appearance: none;
width: 70%;
-webkit-appearance: none;
background: rgb(215, 0, 3);
background: linear-gradient(90deg, rgba(215, 0, 3, 1) 0%, rgba(253, 122, 0, 1) 25%, rgba(255, 255, 0, 1) 50%, rgba(29, 221, 0, 1) 75%, rgba(0, 115, 186, 1) 100%);
border-radius: 10px;
/* Esta configuración de propiedad hace que los gráficos al llenar la barra de progreso se redondeen */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px;
/* Establecer la pista en esquinas redondeadas */
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
/* Seguimiento del efecto de sombra incorporado */
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -5px;
/* Iguala el desplazamiento del control deslizante más allá de la pista */
background: #ffffff;
border-radius: 50%;
/* La apariencia se establece en redonda */
border: solid 0.125em rgba(205, 224, 230, 0.5);
/* Establecer borde */
box-shadow: 0 .125em .125em #3b4547;
/* Agregar sombra inferior */
}
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="mx-auto">
<div class="text-center fw-bold" style="height:100px ;">
<output id="outvol" name="outvol" for="vol"></output>
<p><img id="imagen" src="" height="70px"></p>
</div>
</div>
<div class="text-center fw-bold"><label for="vol">Nivel de Sanidad:</label>
<input type="range" id="vol" name="vol" min="0" max="0.9" step="0.1" value="0.4">
</div>
I will thank you very much and I hope it will serve more people with the same problem. thanks for your support
If something like this could be done or even if it is only the brands with their label
I already tried to add the marks but it only worked for me by removing everything like in the examples here
As the documentation says , not everything is implemented, but with a little time and ingenuity it can be done.