Style remplissage inférieur et supérieur de la plage HTML5 entrée

comme expliqué ici , C'est-à-dire permet le style des régions de remplissage ou de piste inférieure et supérieure dans CSS comme suit:

/* The following only affects the range input in IE */

input[type="range"]::-ms-fill-lower {
  background-color: red; 
}

input[type="range"]::-ms-fill-upper {  
  background-color: blue;
}
<input type="range">

personne Ne sait d'une manière d'appliquer différents styles pour le haut et le bas des pistes de la gamme d'entrée dans Firefox, Chrome, etc. utiliser CSS ou n'importe quelle bibliothèque JS?

mise à jour:

comme indiqué par Wilson F , ceci est maintenant pris en charge dans Firefox:

/* The following only affects the range input in FF */

input[type="range"]::-moz-range-progress {
  background-color: red; 
}

input[type="range"]::-moz-range-track {  
  background-color: blue;
}
<input type="range">  
18
demandé sur Community 2015-02-02 20:30:21
la source

5 ответов

tout d'abord, lire l'article Styling Cross-Browser Compatible entrées de gamme avec CSS par Daniel Stern. Son idée est de rendre l'entrée invisible puis d'appliquer les styles personnalisés.

il a également développé un excellent outil en ligne nommé randge.css dans lequel vous sélectionnez le preset de style et les paramètres et d'obtenir le code CSS généré automatiquement comme le suivant:

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}
<input type="range">

Oui, avec CSS seulement c'est possible sur IE seulement, mais si vous n'y voyez pas d'inconvénient à ajouter quelques scripts, cela peut être simulé avec un gradient linéaire. Voir l'échantillon suivant: codepen.io / ryanttb / pen/fHyEJ

10
répondu Alexander Dayan 2015-02-02 22:35:30
la source

il y a un (newish?) pseudo-élément pour Firefox qui styles (ce que IE appelle) la partie "inférieure" de l'entrée de gamme. Selon la documentation :

Le ::-moz-gamme-progrès CSS pseudo-élément représente la partie de la "piste" (la rainure dans laquelle l'indicateur aka pouce diapositives) de un <input> type="range", qui correspond à des valeurs inférieures à la la valeur actuellement sélectionné par le pouce.

pour la voie supérieure, vous utilisez encore (par réponse D'Alexander Dayan ) ::-moz-range-track .

je viens de le découvrir et de l'essayer aujourd'hui; fonctionne assez bien.

6
répondu Wilson F 2017-05-23 15:00:20
la source

à ce stade, il n'y a toujours pas d'option pour la mise en œuvre autochtone de -ms-fill-lower ou -moz-fill-lower en Chrome. Manipulation de l'élément d'entrée de gamme avec RangeSlider.js n'était pas une option alors j'ai utilisé la technique de retouche avec des Gradients linéaires CSS et un peu de javascript pour tirer des changements css sur la plage d'entrée mouvement du pouce Espérons que cela aide quelqu'un check exemple sur Codepen

2
répondu Duplich 2017-07-04 14:26:46
la source

j'utilise cette solution inspirée de Noah Blon . Il utilise une ombre de boîte basée sur la largeur de vue (100vw est la largeur maximale du curseur), et contraint avec débordement:caché. J'utilise un pouce rond, donc soustrait la moitié de la largeur du pouce de la 100vw, sinon l'ombre de la boîte se glisse sur l'autre côté du pouce.

css

.wb-PKR-slider {
    -webkit-appearance:none;
    appearance:none;
    margin:5px;
    width:calc(100% - 10px);
    width:-webkit-calc(100% - 10px);
    height:25px;
    outline:none;
    background:bisque;
    border-radius:12px;   
    overflow: hidden;
}
.wb-PKR-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    background:sienna;
    box-shadow: -100vw 0 0 calc(100vw - 12px) peru;
    cursor:pointer;
    border-radius: 50%; 
}

html

<input type="range" min="0" max="150" value="25" class="wb-PKR-slider" id="wb-PKR-chip-count">

(fyi bisque, Sienne et Pérou sont tous nommés couleurs css )

1
répondu Eric D'Souza 2018-08-21 06:49:37
la source

j'utilise le code suivant qui était basé sur le lien fourni par A. Dayan. Prendre note des valeurs min-max et être spécifique à webkit, cacher aussi qu'il s'agit en fait d'un gradient.

<html>
<head>
    <title>A styled slider</title>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

    <style type="text/css">
        input[type='range'] {
            -webkit-appearance: none;
            width: 100%;
            border-radius: 4px;
            height: 5px;
            border-color: #1f1f1f; 
            border-style: solid; 
            border-width: 1px;
            background: -webkit-linear-gradient(left, green 0%, green 50%, black 50%);
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            -webkit-border-radius: 2px;
            background-color: blue;
            height: 21px;
            width: 9px;
        }

        input[type=range]:focus {
            outline: none; 
        }
    </style>


</head>
<body>
    <div>
      <input type="range" value="75" min="100" max="300" />
    </div>
    <script type="text/javascript" >
        $('input[type="range"]').on('input', function () {
            var percent = Math.ceil(((this.value - this.min) / (this.max - this.min)) * 100);
            console.log(this.min);
            $(this).css('background', '-webkit-linear-gradient(left, green 0%, green ' + percent + '%, black ' + percent + '%)');
        });
    </script>
</body>
</html>
0
répondu mickeymicks 2015-04-20 12:50:41
la source

Autres questions sur