Как сделать стилизацию ползунка?

Question

[Кирилл Белаш]

Как сделать именно такую стилизацию ползунка? Не получается конкретно градиент сделать. Т.е два цвета получается но, градиент нет.

Answer 1

[Danny Arty]

Измененный

Comments

[Кирилл Белаш]

я видел этот пример, тут градиент на всю длину а мне нужен а уровень ползунка + остаток серым цветом

[Кирилл Белаш]

overflow не канает)

[Danny Arty]

Кирилл Белаш, ох я вообще забыл про этот вопрос, ща поправлю

[Danny Arty]

Кирилл Белаш, сделал, проверяй

[Кирилл Белаш]

Danny Arty, спасибо!!!

[Кирилл Белаш]

Danny Arty, а как с поддержкой кроссбраузерности в данном случае?

[Danny Arty]

Кирилл Белаш, достаточно добавить

input[type='range']::-moz-range-thumb {
  width: 25px;
  -webkit-appearance: none;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  border: 5px solid #000;
}
input[type='range']::-ms-thumb {
  width: 25px;
  -webkit-appearance: none;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  border: 5px solid #000;
}

[Кирилл Белаш]

Danny Arty, проблема не в css а в js на ios отказывается работать совсем

[Кирилл Белаш]

Danny Arty, мак, айпады и айфоны не желают видеть градиент через js

[Danny Arty]

Кирилл Белаш, замени в скрипте последние два блока кодом ниже. Если что изменил codepen основной

slider.style.cssText +=';'+ `background: linear-gradient(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%); background: -webkit-linear-gradien(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%); background: -moz-linear-gradien(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%);`

slider.oninput = function() {
  this.style.cssText += ';'+ `background: linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%); background: -webkit-linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%); background: -moz-linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%);`
};

[Кирилл Белаш]

Danny Arty,

как видишь даже 11 айфон не желает

[Кирилл Белаш]

Danny Arty, я не понимаю почему именно через js отказывается работать, т.е стилями задаешь все ок, но стоит написать через js ни в какую

[Danny Arty]

Кирилл Белаш, с ними постоянно проблемы, попробуй это поставить тогда, если не сработает, то только через псевдоэлемент заработает.

slider.style.cssText +=';'+ `background: linear-gradient(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%); background-image: -webkit-linear-gradien(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%); background: -moz-linear-gradien(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%);`

slider.oninput = function() {
  this.style.cssText += ';'+ `background: linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%); background-image: -webkit-linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%); background: -moz-linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%);`
};

[Кирилл Белаш]

Danny Arty, нет не работает, а как через псевдоэлемент? У меня же динамически вычисляемое значение...

[Danny Arty]

Кирилл Белаш, странно, а у меня заработало норм на Iphone 8 и X... Я где-то ветку читал про градиент в Сафари и новом IOS, где решением было создать псевдоэлемент с пустым контентом и ему задать градиент через background-image

[Кирилл Белаш]

Danny Arty, в общем решил вопрос последним твоим методом! спс еще раз)

[Danny Arty]

Кирилл Белаш, не за что)