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

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

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

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

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

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

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%);`
};

Как в modx revo Условие If else внутри meta description?

Maks Hate, теперь нормально работает?

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

Кирилл Белаш, замени в скрипте последние два блока кодом ниже. Если что изменил 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%);`
};

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

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

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

Как сделать адаптивный блок?

elawliet, я же скинул пример с codepen. Внизу есть кнопки для масштабирования. Скролл есть и блок всегда по центру

Как сделать ссылку, используя css а не тег?

Stepan Sidorov, сделать то можно, но соглашусь с ответом ниже - это велосипед, в котором нет смысла, так как вы усложняете код.

Как сделать адаптивный блок?

elawliet, значит что то не так сделал

Как сделать адаптивный блок?

Задать максимальную ширину для блока div и margin: 0 auto;

Как правильно проверить наличие css класса у дочерних элементов с помощью jquery?

pofeg, изменил codepen и добавил его в ответ. Используется this как вы хотели

Альтернатива сдувшемуся гугл фото?

Павел, ну дык, учитывая что вы написали в вопросе, вам ни одно бесплатная версия не подойдет, то бишь в любом случае на платную переходить, а тут и цена не кусается. 7$ в месяц или 60$ в год вообще копейки по сути

Как сделать текст с абсолютным позиционированием выделяемым?

Сергей delphinpro, пукан затуши, мужик, и почитай про сарказм. Реже будешь выглядеть тупым, как сейчас

Как сделать здесь нормальное позиционирование?

BavarianBeer, че к чему тут сарказм? если ты понимаешь в чем проблема, зачем задавать вопрос?!

Как в modx revo Условие If else внутри meta description?

Maks Hate, ааа, ну дык по вашему условию и сделал, если надо закоментированный вариант в коде, то вместо Это Description сделайте <!--Это Description-->

Как правильно проверить наличие css класса у дочерних элементов с помощью jquery?

pofeg, отлично работает. В примере ниже сделал background: red; для li с классом active для наглядности. Вы jquery подключили?

Как в modx revo Условие If else внутри meta description?

Maks Hate, скопируйте измененный и вставьте в код, теперь должно работать нормально

Как в modx revo Условие If else внутри meta description?

Maks Hate, я маленько ошибся, исправил. Попробуйте теперь

Как в modx revo Условие If else внутри meta description?

Антон Тарасов, да, забыл сказать. Просто я на всех сайтах использую pdoTools, а fastField уже включен в pdoParser

Как правильно проверить наличие css класса у дочерних элементов с помощью jquery?

pofeg,

проблема в том что таких элементов одинаковых на странице несколько

это не проблема. то, что я предложил будет работать с каждым таким элементов, а не только с первым

мне нужно использовать this

это обязательное условие задачи?