スライダーの前後で異なる色になるようにHTML5範囲入力のスタイルを設定するにはどうすればよいですか？

105

ここに画像の説明を入力してください

左側を緑色、右側を灰色にしたいです。上の写真のように完璧です。できれば純粋なCSSソリューション（WebKitについてのみ心配する必要があります）。

そのようなことは可能ですか？

css  html  input  webkit 
— シャムーン
ソース
おそらく、あなたは何を試しましたか？ここにコードを投稿してください。
— j08691 2013
2
ここに行きます： codepen.io/vsync/pen/mdEJMLv？editors
— 1100 –vsync20年
非常に役立つ質問です。
— SauravKumar20年

回答:

126

純粋なCSSソリューション：

  • Chrome：のオーバーフローを非表示にし、input[range]親指の残りのすべてのスペースを影の色で塗りつぶします。
  • IE：車輪の再発明の必要はありません：::-ms-fill-lower
  • Firefox は車輪の再発明をする必要はありません：::-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"/>
スニペットを展開

— deathangel908
ソース
1
こんにちはdeathangel908、素晴らしい解決策。ボックスの影の部分を改善します。box-shadow：-80px 0 0px 80px＃43e5f7;
— Filip Witkowski 2016
33
Chromeでのこれに関する問題は、親指をトラックよりも大きくしたい場合、ボックスの影が親指の高さでトラックと重なることです。ボックスシャドウをトラック内に閉じ込める方法はありますか？
— mharris7190 2017年
1
これは、パーセンテージベースの幅の入力では機能しません。誰かがその回避策を持っていますか？
— Remi Sture 2017年
2
動作するCSS / JSバージョンはここにあります：jsfiddle.net/remisture/esyvws3d
— Remi Sture
3
@tenwestうわー、それはひどいです。更新していただきありがとうございます！
— CodeF0x
61

受け入れられた答えは理論的には良いですが、親指がoverflow: hidden。によって切り落とされない限り、トラックのサイズより大きくなることはできないという事実を無視しています。ほんの少しの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>
スニペットを展開

— dargue3
ソース
あなたは、私がHTMLで最大= 5を追加したときに私を提案することができ、色が正しく記入しない
— Husna
@Husnaこの回答を拡張して、最小最大属性も処理できるようにしました。お役に立てば幸いです。
— htmn
1
@Husna最大値と最小値の差として％を計算する必要があります。:, 10、あなたが使用する必要があり、JSで：たとえば、あなたが分がある場合は、0とmaxを+ this.value / (10-0)*100 +'%, #fff
— ロザリオ・ルッソ
5
@Rosario Russo JSでthis.valueを次のように置き換える必要があります(this.value-this.min)/(this.max-this.min)*100
— Silvan
@ dargue3あなたはsilvans入力であなたの答えを更新するべきです
— Toskan 2010
28

はい、可能です。input rangeHTML5で追加された新しい要素であり、HTML5はドラフトにすぎないため（そして長い間続くため）、すべてのブラウザーで実際に適切にサポートされているわけではないため、お勧めしませんが、スタイリングに関してはおそらく最善ではありません選択。

また、JavaScriptも少し必要になります。簡単にするために、このためにjQueryライブラリを自由に使用しました。

ここに行く：http://jsfiddle.net/JnrvG/1/。

— federico-t
ソース
8
それは問題ではありませんでした、私はcssによってそれをする必要があります、cssだけで方法があります。
— ipad 2014
10
JSなしでChromeで動作させることができます（jsfiddle.net/1xg1j3tw）。IE10 +の場合、-ms-fill-lowerおよび-ms-fill-upper疑似要素を使用できます。
— エール2014年
1
@Alesあなたはそれを追加の答えに入れるべきです。
— Luca Steeb 2015
4
に変更.change(すると on('input', func..、ユーザーがマウスを上に動かすだけでなく、親指を動かしたときに背景が変わるようになります。
— ヤミオディメル2017
10

これに対する小さな更新：

以下を使用すると、マウスを離すのではなく、その場で更新されます。

「mousemoveの変更」、「function」

<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>
— ジェームズパーカー
ソース
9

上に構築@ dargue3の答え、あなたは親指がトラックよりも大きくなるようにしたい場合、あなたは完全にの利点を活用したい<input type="range" />要素やクロスブラウザを行く、あなたはJS＆CSSの少し余分な行が必要です。

クローム/ Mozillaのに使用できるlinear-gradient技術を、しかし、あなたがに基づいて比率を調整する必要がありmin、max、value述べたように属性をここで@Attila O.。これをEdgeに適用していないことを確認する必要があります。そうしないと、サムが表示されません。@GeoffreyLallouéがこれについて詳しく説明しています。

言及する価値のあるもう1つのことはrangeEl.style.height = "20px";、IE / Olderで調整する必要があるということです。簡単に言えば、この場合、「高さはトラックに適用されるのではなく、親指を含む入力全体に適用される」ためです。フィドル

/**
 * 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" />
スニペットを展開

— htmn
ソース
5

以前に承認されたソリューションは機能しなくなりました。

rangeカーソルの前に必要なバーを追加して、スタイル付きコンテナーにラップする単純な関数をコーディングすることになりました。私が書いたこの例で、彼らはすぐに修正できるように簡単には、CSSで2色「青」と「オレンジ」セットを見るために。

— フェデゲ
ソース
1

最初の答えを使用する場合、親指に問題があります。Chromeでは、親指をトラックよりも大きくしたい場合、ボックスの影がトラックと親指の高さで重なります。

これらすべての答えを要約し、より大きなスライダーサムで正常に機能するスライダーを作成しました：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>
スニペットを展開

— アブディガリ
ソース
0

WebKit、Firefox、IEのそれぞれの疑似要素でサポートされるようになりました。しかし、もちろん、それはそれぞれに異なります。：（

この質問の回答を参照prettify <input type=range> #101するか、いくつかの解決策のタイトルが付いたCodePenを検索してください。

— ウィルソンF
ソース
-5 
input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

上記のコードは範囲入力スタイルを変更します.....

— クリシュ
ソース
FireFox 57で動作しますが、Opera49やSafari11では動作しません。さらに悪いことに、前景色をサポートするものはありません。
— devon 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.