通过 JS/JQuery 更改范围 slider 拇指的 CSS 属性

Question

Similar questions have been asked before but none of them answer my question.

Question

How could I change CSS properties dynamically on a range slider ( ::-webkit-slider-thumb / ::-moz-range-thumb ) when the slider position changes?

Background: I have a styled range thumb with a background image on it. When I slide I want to change the background position to show different parts of the background image based on the position. The CSS code I currently have is just the basic setup and only works in Chrome (as this is currently just a playground):

input[type=range]::-webkit-slider-thumb {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background-image: url(https://i.pinimg.com/236x/22/58/74/22587435a1a6dae08711cdb64ee7efb3.jpg);
  background-position: 00px -10px;
  background-size: 200px 300px;
}

I have not found a way to change the background-position property via JQuery or Vanilla JS.

Here is a Fiddle I set up that currently only toggles a class an the input itself which is far away from the desired result.

Answer 1

I have defined a variable for the root element. And I updated the background-position according to the slider's value.

 const range = document.getElementById('range'); const rangeV = document.getElementById('rangeValue'); const setValue = ()=>{ const newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ); const newPosition = 35 - (newValue * 0.7); rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`; /* added */ document.documentElement.style.setProperty("--bg-pos-x", `${newValue}px`); document.documentElement.style.setProperty("--bg-pos-y", `${newValue}px`); /****/ rangeV.innerHTML = `<span>${range.value}%</span>`; }; document.addEventListener("DOMContentLoaded", setValue); range.addEventListener('input', setValue);

 /* added */ html { --bg-pos-x:00px; --bg-post-y:-10px; } /***/ body { font-family: Arial; margin: 50px; }.range-wrap { width: 500px; position: relative; }.ticks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: absolute; width: 100%; }.ticks p { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; width: 1px; background: #D3D3D3; height: 10px; line-height: 40px; margin: 0 0 20px 0; } input[type=range] { -webkit-appearance: none; margin: 20px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #005DFF; border-radius: 25px; } input[type=range]::-webkit-slider-thumb { height: 70px; width: 70px; border-radius: 50%; background: white; border: solid 4px #005DFF; border-color: #005DFF #005DFF transparent transparent; border-radius: 100% 100% 100% 100%; cursor: pointer; -webkit-appearance: none; -webkit-transform: translateY(-44%) rotate(-45deg); transform: translateY(-44%) rotate(-45deg); }.range-value { position: absolute; top: -50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }.range-value span { width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; background: #0008d7; font-size: 18px; display: block; position: absolute; top: 20px; border-radius: 50%; pointer-events: none; z-index: 99; } input[type=range]::-webkit-slider-thumb { height: 70px; width: 70px; border-radius: 50%; background-image: url(https://i.pinimg.com/236x/22/58/74/22587435a1a6dae08711cdb64ee7efb3.jpg); background-position: var(--bg-pos-x) var(--bg-pos-y); background-size: 200px 300px; }

 <div class="range-wrap"> <div class="ticks"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div class="range-value" id="rangeValue"></div> <input id="range" type="range" min="1" max="10" value="1" step="0.1"> </div>