26787 sujets

CSS et mise en forme, CSS3

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 Smiley cligne
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 ? Smiley sweatdrop

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 !
Du coup j'ai pas bien compris le coup de la couleur qui se mélange. Voila un exemple. J'ai rajouté 2 div (une pour le fond et une pour la valeur). Il suffit de récup la value du range en Js et de donner la width correspondante à la div: https://jsfiddle.net/undless/bktn1o3g/

Ca colle à ce que tu veux faire ?
Meilleure solution
Administrateur
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 Smiley pelle