Переопределение CSS динамически из JavaScript

Question

Я пытаюсь создать горизонтальную полосу прокрутки на основе приведенного здесь примера:

https://www.w3schools.com/howto/howto_js_rangeslider.asp

Мой вопрос касается ширины движущегося ползунка (только движущегосяэлемент объекта).Просто чтобы прояснить ситуацию, я загружаю снимок экрана созданного мною слайдера, в котором обведен элемент, ширину которого я пытаюсь изменить: Ползунок

Есть ли способ переопределить свойство CSS и динамически изменять ширину, в зависимости от входных данных?

Что я пытался сделать до сих пор, основываясь на похожих вопросах, которые я нашел, так это изменитьШирина с помощью веб-набора.К сожалению, это не работает:

 elem.before($('<div class="slidecontainer"><input type="range" id="mySlider" min="1" max="100" value="50" class="slider"></div>'));
 slider = _.find($('[id="mySlider"]'));
 slider = $(slider);
 document.getElementById('mySlider').style.webkitTransform = '{width: 250 px}';

Ниже вы также можете найти картинку со свойством css, которое я хотел бы динамически изменить: Файл CSS

Любой совет будетбыть очень полезнымЗаранее спасибо!

Answer 1

Попробуйте это:

document.body.innerHTML = '<div class="slidecontainer"><input type="range" id="mySlider" min="1" max="100" value="50" class="slider"></div>'

document.querySelector('#mySlider').style.width = '250px';

setTimeout(() => {
  document.querySelector('#mySlider').style.width = '100px';
},3000)

Вы делали гораздо больше, чем нужно.Просто установите style.width для вашего элемента.

ОБНОВЛЕНИЕ На сегодняшний день лучший способ изменить только ползунок - использовать переменные CSS:

document.body.innerHTML = '<div class="slidecontainer"><input type="range" id="mySlider" min="1" max="100" value="50" class="slider"></div>'

document.querySelector('#mySlider').style.setProperty('--thumb-width', '55px');

setTimeout(() => {
  document.querySelector('#mySlider').style.setProperty('--thumb-width', '155px');
},3000)

#mySlider {
  -webkit-appearance: none;
  appearance: none;
  background: #d3d3d3;
  width: 100%;
  height: 25px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#mySlider:hover {
  opacity: 1;
}

#mySlider::-webkit-slider-thumb {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: #FF0000;
  border: 1px solid #000000;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  cursor: pointer;
  height: 25px;
  outline: none;
  width: var(--thumb-width, 25px);
}



#mySlider::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  background: #FF0000;
  border: 1px solid #000000;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  cursor: pointer;
  height: 25px;
  outline: none;
  width: var(--thumb-width, 25px);
}

#mySlider::-ms-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #FF0000;
  border: 1px solid #000000;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  cursor: pointer;
  height: 25px;
  outline: none;
  width: var(--thumb-width, 25px);
}