150

ここに画像の説明を入力

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

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

4

11 に答える 11

177

純粋な 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"/>

于 2016-07-02T19:46:27.030 に答える
121

受け入れられた答えは理論的には優れていますが、親指がトラックのサイズよりも大きくなっても、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>

于 2019-07-22T20:32:51.753 に答える
14

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

これらすべての回答を要約して、スライダーの親指を大きくして正常に動作するスライダーを書きました: 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>

于 2020-09-17T15:36:03.687 に答える
11

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

以下を使用すると、マウスのリリースではなくオンザフライで更新されます。

"マウスムーブを変更", 関数"

<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>
于 2016-02-28T21:22:46.150 に答える
6

以前に承認された解決策は、もはや機能していません。

range最終的に、カーソルの前に必要なバーを追加するスタイル付きコンテナーにラップする単純な関数をコーディングしました。この例では、css で設定されている「青」と「オレンジ」の 2 つの色を簡単に確認できるように記述したので、それらをすばやく変更できます。

于 2016-07-05T08:17:19.090 に答える
0

WebKit、Firefox、IE のそれぞれの疑似要素でサポートされるようになりました。でも、もちろんそれぞれ違います。: (

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

于 2016-02-10T01:09:03.557 に答える