Stil untere und Obere Füllung im HTML5-Bereich Eingang

Erläutert hier, IE ermöglicht das styling der unteren und der oberen Fläche oder track-Regionen in CSS wie folgt:

CSS:

/* 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;
}

HTML:

<input type="range">

Kennt jemand eine Möglichkeit, verschiedenen Stilen an den oberen und unteren Spuren einer Auswahl-Eingabe in Firefox, Chrome, etc. mit CSS oder irgendwelche JS-Bibliothek?

UPDATE:

Wie bereits von Wilson F, ist dies nun, unterstützt in Firefox:

CSS:

/* 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;
}

HTML:

<input type="range">

InformationsquelleAutor blcook223 | 2015-02-02

Zuerst von all, Lesen Sie den Artikel Styling-Cross-Browser-Kompatibel-Bereich Eingänge mit CSS von Daniel Stern. Seine Idee ist, machen Sie die Eingabe unsichtbar und wenden Sie dann die benutzerdefinierte Stile.

Er entwickelte auch eine hervorragende online-tool namens randge.css, in dem Sie den Stil preset und die Parameter und bekommen automatisch generierten CSS-code wie den folgenden ein:

CSS:

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;
}

HTML:

<input type="range">

Ja, mit CSS ist es möglich auf nur IE, aber wenn Sie nichts dagegen haben, fügen Sie einige scripting-es kann simuliert werden, mit linearem Verlauf. Siehe das folgende Beispiel: codepen.io/ryanttb/pen/fHyEJ

danke. Dies ist sehr hilfreich, aber leider keine Antwort auf meine wichtigste Frage. Ich möchte unterschiedliche Arten von Regionen des Tracks auf der linken und auf der rechten Seite der "Daumen". Ich bin mir nicht sicher, ob dies möglich ist, außerhalb des IE.
Ja, mit CSS ist es möglich auf nur IE, aber wenn Sie nichts dagegen haben, fügen Sie einige scripting-es kann simuliert werden, mit linearem Verlauf. Siehe das folgende Beispiel: codepen.io/ryanttb/pen/fHyEJ
Sehr schön. Danke.

InformationsquelleAutor Alexander Dayan

6

Gibt es eine (newish?) pseudo-element für Firefox, die styles (was IE Aufrufe), die "unteren" Teil des Eingangsbereich. Nach die Dokumentation:

Den ::-moz-range-Fortschritt CSS-pseudo-element steht für den Teil
der "track" (die Nut, in der der Indikator aka Daumen Dias) von
ein <input> von type="range" entspricht, die Werte niedriger als die
Wert aktuell ausgewählt mit dem Daumen.

Für die Obere Strecke, die Sie noch verwenden (pro Alexander Dayan Antwort) ::-moz-range-track.

Ich habe gerade entdeckt, und versucht es auch heute; die ziemlich gut funktioniert.

InformationsquelleAutor Wilson F
3

Zu diesem Zeitpunkt gibt es noch keine option für die native Implementierung von
-ms-fill-lower oder -moz-fill-lower in Chrom. Manipulation der Reihe input-element mit RangeSlider.js war keine option, also habe ich die tweaking-Technik mit CSS-lineare Verläufe und bisschen javascript, um das Feuer css-änderungen an den input-Bereich Daumen-Bewegung
Hoffe, dies hilft jemand überprüfen Beispiel auf Codepen
- Kann ich die AngularJS-version bitte?
- Leider habe ich keinen Zugriff mehr auf diesen code. Es ist Links hinten in der alten Firma, die ich habe :/
InformationsquelleAutor Duplich
1

Ich bin mit dieser Lösung inspiriert von Noah Blon. Es verwendet eine box-shadow basierend auf view Breite (100vw ist die max Breite des Schiebers), und schränkt mit overflow:hidden. Ich bin mit einer Runde Daumen, so subtrahiert die Hälfte der Daumen Breite von der 100vw, da sonst die box Schatten kriecht über die andere Seite des Daumens.

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, sienna und peru sind alle benannt css-Farben)
- Dies ist eine gute css-only Lösung, auch wenn es fühlt sich sehr hack-y. Beachten Sie, dass auf den unteren Teil des Schiebereglers, um die sich die Füllfarbe wird cutoff in einem rechteckigen Mode, so wird dies nicht funktionieren, wenn Sie möchten, dass Ihre Spur zu haben, ein border-radius.
InformationsquelleAutor Eric D'Souza

ich bin mit dem folgenden code, welches Sie auf den bereitgestellten link von A. Dayan. Unter Berücksichtigung der min-max-Werte und speziell für webkit, die auch ausblenden, dass es tatsächlich ein Gefälle.

<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>

Es zeigt nur wie die Farbe für den Bereich nicht die untere und die Obere, wie erwähnt, in der Frage

InformationsquelleAutor mickeymicks

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.