如何用JavaScript修改.slider::-webkit-slider-thumb高度实现滑块随值变尺寸

Hey there! The issue you're running into is that pseudo-elements like ::-webkit-slider-thumb aren't part of the DOM, so you can't target them directly with JavaScript to change their height/width. Instead, we'll use CSS variables to link the slider's value to the thumb's size—this is the cleanest, most maintainable way to do it.

Here's how to implement it step by step:

1. Update CSS with CSS Variables #

First, add a CSS variable (we'll call it --thumb-size) to your slider element, then use that variable for both the width and height of the slider thumb (including the Firefox variant):

.slidecontainer {
  width: 100%;
}

.slider {
  --thumb-size: 25px; /* Default size for initial value (50) */
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

2. Modify JavaScript to Calculate & Update the Variable #

Next, update your JS to calculate the correct thumb size based on the slider's value (1 = 10px, 100 = 100px) and set the CSS variable on the slider element. We'll use linear interpolation to get a smooth size transition between the min and max values:

const slider = document.getElementById("myRange");
const output = document.getElementById("demo");

// Calculate initial thumb size
function updateThumbSize() {
  const minSize = 10;
  const maxSize = 100;
  const minValue = parseInt(slider.min);
  const maxValue = parseInt(slider.max);
  
  // Linear interpolation formula to map value to size
  const size = minSize + ((slider.value - minValue) / (maxValue - minValue)) * (maxSize - minSize);
  
  // Set the CSS variable on the slider
  slider.style.setProperty('--thumb-size', `${size}px`);
  
  // Update the value display
  output.innerHTML = slider.value;
}

// Initialize on page load
updateThumbSize();

// Update when slider is adjusted
slider.oninput = updateThumbSize;

3. Full Working HTML #

Putting it all together, your HTML will look like this:

<h1>Round Range Slider</h1>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

Why This Works #

• CSS variables act as a bridge between your JavaScript and the pseudo-element: when you update the variable on the slider element, the pseudo-element (which inherits from the slider) automatically uses the new value.
• The linear interpolation ensures the thumb size scales smoothly between 10px (value 1) and 100px (value 100), no jumps or weird gaps.

内容的提问来源于stack exchange，提问作者user8724413