Wie kann ich die HTML5-Bereichseingabe so gestalten, dass sie vor und nach dem Schieberegler unterschiedliche Farben hat?

93

Geben Sie hier die Bildbeschreibung ein

Ich möchte, dass die linke Seite grün und die rechte Seite grau ist. Wie oben abgebildet wäre perfekt. Vorzugsweise eine reine CSS-Lösung (Sie müssen sich nur um WebKit kümmern).

Ist so etwas möglich?

css  html  input  webkit 
— Shamoon
quelle
Was hast du wahrscheinlich versucht? Geben Sie hier Ihren Code ein.
— j08691
2
— vsync

Antworten:

118

Reine CSS- Lösung:

  • Chrome: Blenden Sie den Überlauf aus input[range]und füllen Sie den gesamten zum Daumen verbleibenden Bereich mit Schattenfarbe.
  • IE: Das Rad muss nicht neu erfunden werden:::-ms-fill-lower
  • Firefox muss das Rad nicht neu erfinden:::-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"/>
Erweitern Sie das Snippet

— Deathangel908
quelle
1
Hallo Deathangel908, schöne Lösung. Ich würde nur den Box-Shadow-Teil verbessern: Box-Shadow: -80px 0 0px 80px # 43e5f7;
— Filip Witkowski
32
Das Problem bei Chrom ist, dass der Boxschatten die Spur mit der Höhe des Daumens überlappt, wenn der Daumen größer als die Spur sein soll. Gibt es eine Möglichkeit, den Kastenschatten innerhalb der Spur einzuschränken?
— mharris7190
1
Dies funktioniert nicht für Eingaben mit prozentualen Breiten. Hat jemand eine Problemumgehung dafür?
— Remi Sture
2
Eine funktionierende CSS / JS-Version finden Sie hier: jsfiddle.net/remisture/esyvws3d
— Remi Sture
3
@tenwest Wow, das ist schrecklich. Danke für das Update!
— CodeF0x
50

Während die akzeptierte Antwort theoretisch gut ist, ignoriert sie die Tatsache, dass der Daumen dann nicht größer als die Größe der Spur sein kann, ohne von der abgeschnitten zu werden overflow: hidden. Sehen Sie sich dieses Beispiel an, wie Sie mit nur einem kleinen Stück JS damit umgehen können.

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + this.value + '%, #fff ' + this.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" type="range" value="50" />
</div>
Erweitern Sie das Snippet

— dargue3
quelle
— Kannst
@Husna Ich habe diese Antwort erweitert, um auch min max Attribute zu behandeln, hoffe es hilft.
— 6.
1
@Husna Sie müssen den Prozentsatz als Differenz zwischen Ihrem Maximal- und Minimalwert berechnen. Wenn Sie beispielsweise min: 0 und max: 10 haben, sollten Sie im JS:,+ this.value / (10-0)*100 +'%, #fff
— Rosario Russo
4
@Rosario Russo Sie müssen diesen Wert nur in der JS mit(this.value-this.min)/(this.max-this.min)*100
— Silvan
29

Ja, es ist möglich. Obwohl ich es nicht empfehlen würde, weilinput range es nicht von allen Browsern richtig unterstützt wird, weil ein neues Element in HTML5 hinzugefügt wurde und HTML5 nur ein Entwurf ist (und lange dauern wird), so weit, dass es vielleicht nicht das beste ist, es zu stylen Wahl.

Außerdem benötigen Sie ein bisschen JavaScript. Der Einfachheit halber habe ich mir erlaubt, die jQuery- Bibliothek dafür zu verwenden.

Los geht's: http://jsfiddle.net/JnrvG/1/ .

— federico-t
quelle
8
Das war nicht die Frage, was ich tun muss, um es per CSS zu tun, es muss nur mit CSS einen Weg geben.
— Ipad
10
Sie können es in Chrome ohne JS ( jsfiddle.net/1xg1j3tw ) zum Laufen bringen . Für IE10 + können Sie die Pseudoelemente -ms-fill-lower und -ms-fill-superior verwenden.
— Ales
1
@Ales Du solltest das in eine zusätzliche Antwort einfügen.
— Luca Steeb
4
Ändern Sie .change(auf, on('input', func..damit sich der Hintergrund ändert, wenn der Benutzer den Daumen und nicht nur die Maus nach oben bewegt.
— Yami Odymel
10

Ein kleines Update zu diesem:

Wenn Sie Folgendes verwenden, wird es im laufenden Betrieb und nicht bei der Mausfreigabe aktualisiert.

"Mauswechsel ändern", Funktion "

<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>
— James Parker
quelle
7

Aufbauend auf der Antwort von @ dargue3: Wenn der Daumen größer als die Spur sein soll, Sie das <input type="range" />Element voll ausnutzen und den Browser überqueren möchten , benötigen Sie ein paar zusätzliche Zeilen JS & CSS.

Auf Chrome / Mozilla Sie können linear-gradientTechnik, aber Sie müssen das Verhältnis einzustellen auf der Basis min, max, valueAttribute wie erwähnt hier durch @Attila O. . Sie müssen sicherstellen, dass Sie dies nicht auf Edge anwenden, da sonst der Daumen nicht angezeigt wird. @Geoffrey Lalloué erklärt dies hier ausführlicher .

Eine andere erwähnenswerte Sache ist, dass Sie den rangeEl.style.height = "20px";IE / Älter anpassen müssen . Einfach ausgedrückt liegt dies daran, dass in diesem Fall "die Höhe nicht auf die Spur angewendet wird, sondern auf die gesamte Eingabe einschließlich des Daumens". Geige

/**
 * Sniffs for Older Edge or IE,
 * more info here:
 * https://stackoverflow.com/q/31721250/3528132
 */
function isOlderEdgeOrIE() {
  return (
    window.navigator.userAgent.indexOf("MSIE ") > -1 ||
    !!navigator.userAgent.match(/Trident.*rv\:11\./) ||
    window.navigator.userAgent.indexOf("Edge") > -1
  );
}

function valueTotalRatio(value, min, max) {
  return ((value - min) / (max - min)).toFixed(2);
}

function getLinearGradientCSS(ratio, leftColor, rightColor) {
  return [
    '-webkit-gradient(',
    'linear, ',
    'left top, ',
    'right top, ',
    'color-stop(' + ratio + ', ' + leftColor + '), ',
    'color-stop(' + ratio + ', ' + rightColor + ')',
    ')'
  ].join('');
}

function updateRangeEl(rangeEl) {
  var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max);

  rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5');
}

function initRangeEl() {
  var rangeEl = document.querySelector('input[type=range]');
  var textEl = document.querySelector('input[type=text]');

  /**
   * IE/Older Edge FIX
   * On IE/Older Edge the height of the <input type="range" />
   * is the whole element as oposed to Chrome/Moz
   * where the height is applied to the track.
   *
   */
  if (isOlderEdgeOrIE()) {
    rangeEl.style.height = "20px";
    // IE 11/10 fires change instead of input
    // https://stackoverflow.com/a/50887531/3528132
    rangeEl.addEventListener("change", function(e) {
      textEl.value = e.target.value;
    });
    rangeEl.addEventListener("input", function(e) {
      textEl.value = e.target.value;
    });
  } else {
    updateRangeEl(rangeEl);
    rangeEl.addEventListener("input", function(e) {
      updateRangeEl(e.target);
      textEl.value = e.target.value;
    });
  }
}

initRangeEl();
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 300px;
  height: 5px;
  padding: 0;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}


/*Chrome thumb*/

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 5px;
  /*16x16px adjusted to be same as 14x14px on moz*/
  height: 16px;
  width: 16px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*Mozilla thumb*/

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -moz-border-radius: 5px;
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge input*/

input[type=range]::-ms-track {
  width: 300px;
  height: 6px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 2px 0;
  /*remove default tick marks*/
  color: transparent;
}


/*IE & Edge thumb*/

input[type=range]::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge left side*/

input[type=range]::-ms-fill-lower {
  background: #919e4b;
  border-radius: 2px;
}


/*IE & Edge right side*/

input[type=range]::-ms-fill-upper {
  background: #c5c5c5;
  border-radius: 2px;
}


/*IE disable tooltip*/

input[type=range]::-ms-tooltip {
  display: none;
}

input[type="text"] {
  border: none;
}
<input type="range" value="80" min="10" max="100" step="1" />
<input type="text" value="80" size="3" />
Erweitern Sie das Snippet

— htmn
quelle
5

Die zuvor akzeptierte Lösung funktioniert nicht mehr .

Am Ende habe ich eine einfache Funktion codiert, die das rangein einen gestalteten Container einwickelt und die Leiste hinzufügt, die vor dem Cursor benötigt wird. Ich habe dieses Beispiel geschrieben, in dem die beiden Farben "Blau" und "Orange" im CSS leicht zu erkennen sind, damit sie schnell geändert werden können.

— fedeghe
quelle
1

Wenn Sie die erste Antwort verwenden , liegt ein Problem mit dem Daumen vor. Wenn in Chrome der Daumen größer als die Spur sein soll , überlappt der Kastenschatten die Spur mit der Höhe des Daumens.

Fassen Sie einfach alle diese Antworten zusammen und schreiben Sie einen normal funktionierenden Schieberegler mit einem größeren Schieberegler-Daumen: 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>
Erweitern Sie das Snippet

— abdigali
quelle
0

Es wird jetzt mit Pseudoelementen in WebKit, Firefox und IE unterstützt. Aber natürlich ist es in jedem anders. : (

Sehen Sie sich die Antworten dieser Frage an und / oder suchen Sie nach einem CodePen mit dem Titel prettify <input type=range> #101für einige Lösungen.

— Wilson F.
quelle
-5 
input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

Der obige Code ändert den Eingabestil des Bereichs .....

— Krish
quelle
Funktioniert in FireFox 57, aber nicht in Opera 49 oder Safari 11 - schlimmer noch, nichts unterstützt die Vordergrundfarbe.
— Devon
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.