Как изменить цвет свойства «прогресс [значение]::-webkit-progress-value»?

Как изменить цвет

progress[value]::-webkit-progress-value {
                background-color: #00bdf8;
            }

при различных значениях, выбранных пользователем когда пользователь выбирает 30%, цвет должен быть красным, при 60% он будет желтым, а затем зеленым

<input type = "range" max = "100" step = "1" class = "inputseekbar" id = "range">
 <progress max = "100" id = "progressbarcolor"></progress>
 <output for = "range" class = "output"></output>

какой будет JS или Jqueryвведите описание изображения здесь

Тег <output> используется для отображения «%».

javascript jquery html css

03.06.2019 07:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 738

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пожалуйста, проверьте значение 30%

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>


progress {
  color: red;
  background: green
}

progress::-webkit-progress-value {
  background: red;
}

progress::-moz-progress-bar {
  background: green;
}

</style>
</head>
<body>
<input type = "range" max = "100" step = "1" class = "inputseekbar" id = "range">
 <progress max = "100" value = "30" id = "progressbarcolor"></progress>
 <output for = "range" class = "output"></output>

</body>
</html>

Мой вопрос в другом. Вы определили жестко закодированное значение в теге прогресса HTML. Но я хочу, чтобы когда пользователь перетаскивал этот индикатор выполнения на 30%, цвет должен был измениться.

— 03.06.2019 11:30

03.06.2019 09:50

Ответ принят как подходящий

Я бы использовал переменную CSS и регулировал значение с помощью JS в зависимости от значения прогресса.

Вот простой пример:

var progress = document.querySelectorAll("progress");
for(var i = 0;i<progress.length;i++) {
   var n = 2 * parseInt(progress[i].getAttribute("value"));
   progress[i].style.setProperty("--c", "rgb("+n+","+n+",20)");
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background:grey;
}
progress::-webkit-progress-value {  
  background-color: var(--c,red);
}

<progress max = "100"  value = "20"></progress>
<progress max = "100"  value = "50"></progress>
<progress max = "100"  value = "60"></progress>
<progress max = "100"  value = "100"></progress>

Вы также можете легко сделать это при изменении:

var progress = document.querySelector("progress");

document.querySelector("input").addEventListener('input', function (evt) {
   progress.setAttribute('value',this.value);
   progress.style.setProperty("--c", "rgb("+2*this.value+","+2*this.value+",20)");
});

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background:grey;
}
progress::-webkit-progress-value {  
  background-color: var(--c,red);
}

<input type = "range" max = "100" step = "1" class = "inputseekbar" id = "range">
<progress max = "100"  value = "50"></progress>

Связанный:

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

Выбор псевдоэлементов CSS, таких как ::before и ::after, и управление ими с помощью jQuery

03.06.2019 12:57

Другие вопросы по теме

Показать/скрыть DIV с несколькими значениями атрибутов на основе значения раскрывающегося списка «Метод фильтрации jQuery»

Почему скрытый атрибут внутри модального окна нельзя изменить?

Javascript отключает модальную всплывающую кнопку в начальной загрузке 4

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

Карта листовки отображается неправильно

Как получить массив json?

Диалоговое окно jQuery не открывается при включении в JavaScript

Функция Jquery в другую функцию не возвращает все результаты

Логика для отображения элемента HTML с комбинацией переключателей

Как отображать данные API из URL-адреса с помощью jquery datatable

Как изменить цвет свойства «прогресс [значение]::-webkit-progress-value»?

Ответы 2

Другие вопросы по теме

Похожие вопросы