web-dev-qa-db-fra.com

Comment styliser une entrée de gamme HTML5 pour avoir une couleur différente avant et après le curseur?

enter image description here

Je veux que le côté gauche soit vert et que le côté droit soit gris. Comme sur la photo ci-dessus serait parfait. De préférence, une solution CSS pure (il suffit de se soucier de WebKit).

Une telle chose est possible?

csshtml5inputwebkit
53
Shamoon

Pure CSS solution:

  • Chrome: Masquer le débordement de input[range], et remplissez tout l’espace laissé par le pouce avec la couleur de l’ombre.
  • IE: pas besoin de réinventer la roue: ::-ms-fill-lower
  • Firefox pas besoin de réinventer la roue: ::-moz-range-progress
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}
<input type="range"/>
75
deathangel908

Oui c'est possible. Bien que je ne le recommande pas car input range n'est pas vraiment pris en charge correctement par tous les navigateurs, car un nouvel élément ajouté en HTML5 et HTML5 n'est qu'un brouillon (et le sera pour longtemps). Par conséquent, le style n'est peut-être pas le meilleur choix.

En outre, vous aurez également besoin d'un peu de JavaScript. J'ai pris la liberté d'utiliser la bibliothèque jQuery pour des raisons de simplicité.

Ici vous allez: http://jsfiddle.net/JnrvG/1/ .

31
federico-t

Une petite mise à jour de celui-ci:

si vous utilisez ce qui suit, il se mettra à jour à la volée plutôt qu’à la sortie de la souris.

"changer de souris", fonction "

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>
7
James Parker

La solution précédemment acceptée ne fonctionnait plus .

J'ai fini par coder une fonction simple qui encapsule le range dans un conteneur stylé en ajoutant la barre nécessaire avant le curseur. J'ai écrit cet exemple où il était facile de voir les deux couleurs "bleu" et "orange" définies dans le fichier css, afin qu'elles puissent être rapidement modifiées.

4
fedeghe

Bien que la réponse acceptée soit bonne en théorie, elle ignore le fait que le pouce ne peut pas être plus grand que la taille de la piste sans être coupé par le overflow: hidden. Voir ce codepen pour un exemple de la façon de gérer cela avec juste un tout petit peu de JS.

https://codepen.io/saintwycliffe/pen/VBGYXN

3
dargue3

Il est maintenant supporté avec des pseudo-éléments dans WebKit, Firefox et IE. Mais, bien sûr, c'est différent dans chacun. : (

Voir les réponses de cette question et/ou rechercher un CodePen intitulé prettify <input type=range> #101 pour certaines solutions.

0
Wilson F