[Résolu] Div recouvrant un input range

Bonjour,
j'ai un range

<input type="range" min="0" max="100" value="0" class="slider" id="beach">

formaté en css:

.slider{
    -webkit-appearance: none;
    width: 150px;
    height: 3px;
    border-radius: 5px;   
    background: #797979;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover{
  opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 50%; 
    background: #7F7F7F;
    cursor: pointer;
}

(je suis sur chrome)

je voudrais créer un div recouvrant le slider mais pas le thumb de manière à ce que je puisse changer sa taille et le colorer différemment suivant la position du thumb (comme le webkit slider runnable track, mais géré à ma façon en js), mais après des heures et des heures je n'y arrive pas du tout. Le proche que j'ai pu obtenir est en faisant un div recourant l'input, en lui fixant les mêmes dimensions que le slider et en le mettant en display:grid, sauf qu'il se trouve toujours en dessous du slider et du thumb même en lui fixant un z-index élevé.
Quand je crée un div en dehors de l'input (juste après), j'arrive pas à positionner le div au dessus du slider (quand je change sa position, ca affecte la position du slider aussi ...)
Help !
Merci d'avance pour votre temps

Salut,


Pourquoi ne pas donner un background transparent à ta barre sinon ?

Mais j'ai peut être pas bien compris la finalité du truc...

Hello laurent,
Le problème de cette solution est que la couleur de ma div sera "mélangée" à celle de ma barre transparente...

mmmmm une couleur "mélangée" a du transparent ça donne la même couleur non ?

En gros tu veux une div qui remplace la barre du fond mais pas le rond c'est ca ?

en gros j'ai ma barre de fond qui est, disons, rouge et mesure 200px, et je veux mettre exactement au-dessus (mais en dessous du thumb) une autre barre verte mais de taille variable (en fait taille entre le début de ma barre rouge et la position du thumb)
Merci pour ton aide !

Ah top merci beaucoup !

install9apps a écrit :
Why not give a transparent background to your bar otherwise?

https://media.giphy.com/media/lkdH8FmImcGoylv3t3/giphy.gif
Modifié par _laurent (11 Sep 2019 - 10:12)

Membre banni, pas pour ce message mais parce qu'un précédent l'a été dans un sujet où un "autre" membre avait posté un lien vers "(4+5) apps". Si vous voyez ce genre de lien (surtout ajouté dans une citation de message précédent), hésitez pas à signaler le message à la modération

Hahaha je me disais aussi Merci