Kaydırıcıdan önce ve sonra farklı renge sahip olacak şekilde HTML5 aralığı girdisini nasıl biçimlendirebilirim?

Question 1

görüntü açıklamasını buraya girin

Sol tarafın yeşil ve sağ tarafın gri olmasını istiyorum. Yukarıda resmedildiği gibi MÜKEMMEL olurdu. Tercihen saf bir CSS çözümü (yalnızca WebKit konusunda endişelenmeniz gerekir).

Böyle bir şey mümkün mü?

Question 2

Saf CSS çözümü:

Chrome: Taşmayı gizleyin ve input[range]soldaki tüm alanı gölge rengiyle doldurun.
IE: tekerleği yeniden icat etmeye gerek yok:::-ms-fill-lower
Firefox'un tekerleği yeniden icat etmesine gerek yok:::-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"/>

Snippet'i genişlet

Question 3

Kabul edilen cevap teoride iyi olsa da, başparmağın, tarafından kesilmeden parçanın boyutundan daha büyük olamayacağı gerçeğini görmezden geliyor overflow: hidden. Bunun yalnızca küçük bir JS parçasıyla nasıl ele alınacağına ilişkin bu örneğe bakın.

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

Snippet'i genişlet

Question 4

Evet mümkün. Bunu tavsiye etmem, çünkü input rangetüm tarayıcılar tarafından gerçekten düzgün bir şekilde desteklenmiyor çünkü HTML5'e eklenen yeni bir öğe ve HTML5 yalnızca bir taslaktır (ve uzun süre devam edecek), bu yüzden şekillendirme konusunda belki de en iyisi değildir. tercih.

Ayrıca, biraz JavaScript'e de ihtiyacınız olacak. Basitlik amacıyla bunun için jQuery kitaplığını kullanma özgürlüğünü aldım .

İşte gidiyorsun: http://jsfiddle.net/JnrvG/1/ .

Question 5

Buna küçük bir güncelleme:

Aşağıdakileri kullanırsanız, fare bırakıldığında değil anında güncellenir.

"fare hareketini değiştir", işlev "

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

Question 6

@ Dargue3'ün cevabının üzerine inşa ederek , başparmağın parçadan daha büyük olmasını istiyorsanız, <input type="range" />öğeden tam olarak yararlanmak ve tarayıcıya geçmek istiyorsanız, biraz fazladan JS ve CSS satırlarına ihtiyacınız var.

Krom / Mozilla sitesinde kullanabilirsiniz linear-gradienttekniği, ancak esas oranını ayarlamak gerekir min, max, valuebelirtildiği gibi niteliklerini burada tarafından @Attila O. . Bunu Edge'de uygulamadığınızdan emin olmalısınız, aksi takdirde başparmak görüntülenmez. @Geoffrey Lalloué bunu daha ayrıntılı olarak burada açıklıyor .

Bahsetmeye değer başka bir şey de rangeEl.style.height = "20px";, IE / Eski üzerinde ayarlamanız gerektiğidir . Basitçe söylemek gerekirse, bu durumda "yükseklik parçaya değil, başparmak dahil tüm girdiye uygulanır". Vaktini boşa harcamak

/**
 * 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" />

Snippet'i genişlet

Question 7

Önceki kabul edilen çözüm artık çalışmıyor .

rangeİmleçten önce ihtiyaç duyulan çubuğu ekleyerek, stilize edilmiş bir kaba saran basit bir işlevi kodladım . Bu örneği css'de 'mavi' ve 'turuncu' olarak ayarlanan iki rengi görmenin kolay olduğu, böylece hızla değiştirilebilecekleri bir yerde yazdım .

Question 8

İlk cevabı kullanırsanız , baş parmakla ilgili bir sorun vardır. Kromda, başparmağın izden daha büyük olmasını istiyorsanız, kutu gölgesi, başparmağın yüksekliğiyle iz ile örtüşür.

Tüm bu yanıtları özetleyin ve normal çalışan kaydırıcıyı daha büyük kaydırıcı başparmağıyla yazın: 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>

Snippet'i genişlet

Question 9

Artık WebKit, Firefox ve IE'nin her birinde sözde öğelerle destekleniyor. Ama elbette her biri farklı. : (

Bkz bu Sorunun 'ın cevapları ve / veya başlıklı bir CodePen aramak prettify <input type=range> #101bazı çözümler için.

Question 10

input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

Yukarıdaki kod, aralık giriş stilini değiştirir .....