Comment donner un style à l'entrée de gamme HTML5 pour qu'elle ait une couleur différente avant et après le curseur ?

Question

Je veux que le côté gauche soit vert et que le côté droit soit gris. L'image ci-dessus serait PARFAITE. De préférence, une solution purement CSS (il suffit de se préoccuper de WebKit).

Une telle chose est-elle possible ?

Answer 1

Pure CSS solution :

• Chrome : Cacher le débordement de input[range] et remplir tout l'espace laissé à 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"/>

Answer 2

Bien que la réponse acceptée soit bonne en théorie, elle ne tient pas compte du fait que le pouce ne peut pas être plus grand que la taille de la piste sans être coupé par l'appareil. overflow: hidden . Voyez cet exemple qui montre comment gérer cela avec un tout petit peu de JS.

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};

#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

<div class="chrome">
  <input id="myinput" min="0" max="60" type="range" value="30" />
</div>

Answer 3

Utilisez cette simple propriété css pour modifier la couleur des cases à cocher, des boutons radio et des plages.

accent-color: #F55050;

---

Support actuel du navigateur

Answer 4

Oui, c'est possible. Bien que je ne le recommande pas parce que input range n'est pas vraiment pris en charge correctement par tous les navigateurs, car il s'agit d'un nouvel élément ajouté dans le HTML5. Le HTML5 n'est qu'une ébauche (et le restera longtemps), donc aller jusqu'à le styliser n'est peut-être pas le meilleur choix.

Vous aurez également besoin d'un peu de JavaScript. J'ai pris la liberté d'utiliser jQuery pour cela, à des fins de simplicité.

Voilà : http://jsfiddle.net/JnrvG/1/ .

Answer 5

Si vous utilisez la première réponse il y a un problème avec le pouce. En chrome, si vous voulez que le pouce pour être plus grande que la voie alors l'ombre de la boîte chevauche la piste avec la hauteur du pouce.

Il suffit de résumer toutes ces réponses et d'écrire que le curseur fonctionne normalement avec un pouce de curseur plus grand : jsfiddle

const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value

slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)`

slider.oninput = function() {
  this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`
};

#myinput {
  border-radius: 8px;
  height: 4px;
  width: 150px;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  width: 6px;
  -webkit-appearance: none;
  height: 12px;
  background: black;
  border-radius: 2px;
}

<div class="chrome">
  <input id="myinput" type="range" min="0" value="25" max="200" />
</div>