html - .slider::-webkit-slider-thumb needed in javascript - Stack Overflow

admin管理员组

文章数量:1202348

I want to make a slider that changes the dot size when the value changes. So value 1 will be a size of 10px and value 100 will be size 100px.

How am a able to change the .slider::-webkit-slider-thumb height with javascript?

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -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: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

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

I want to make a slider that changes the dot size when the value changes. So value 1 will be a size of 10px and value 100 will be size 100px.

How am a able to change the .slider::-webkit-slider-thumb height with javascript?

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -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: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

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

what I tried =

document.getElementById("myRange").style.webkitTransform = "height: 100px";

• javascript
• html
• css
• webkit

Share Improve this question Follow edited Oct 22, 2018 at 13:00 Richard Parnaby-King 14.9k1111 gold badges7272 silver badges130130 bronze badges asked Jan 17, 2018 at 9:07 user8724413user8724413

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 12

Okay, so, before answering the question:

::-webkit-slider-thumb is a pseudo element. Those elements are not part of the DOM. Therefore, changing them in JavaScript can get a bit hacky.

A proper solution would be completely replacing the thumb with another element.

---

Now to answer the question: You could inject styles into an <style> element with a given attribute when the slider value changes.

So you would add

<style data="test" type="text/css"></style>

to your header, then target the element and add CSS to it like that:

var style = document.querySelector('[data="test"]');
style.innerHTML = ".class { property: value; }";

This, combined with the code you provided at this link would be a solution to your problem.

---

Demo:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var style = document.querySelector('[data="test"]');

setData(slider.value);

slider.oninput = function() {
    setData(this.value);
}

function setData(x){
    output.innerHTML = x;
    style.innerHTML = ".slider::-webkit-slider-thumb { width: " + x + "px !important; height: " + x + "px !important; }";
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}
.slider {
    margin-top: 40px;
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
}

<style data="test" type="text/css"></style>

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>

---

Also: you said

So value 1 will be a size of 10px and value 100 will be size 100px.

If you want an approach like value 1 to 10 equals 10px and everything above value 10 is the actual value in pixels, you can change the line

style.innerHTML = "...";

to

style.innerHTML = ".slider::-webkit-slider-thumb { width: " + (x < 10 ? 10 : x)  + "px !important; height: " + (x < 10 ? 10 : x) + "px !important; }";

A Live demo of this version can be found HERE

2023 - Use CSS variables

The accepted answer works, but it's a lot of code and hard to understand. This can be done a lot easier these days...

In your CSS just add a variable like this --sliderSize:

.slider {
  --sliderSize: 25px; /* <---- Add this */
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--sliderSize); /* <---- Set the variable here */
  height: var(--sliderSize); /* <--- and here */
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

Then in your JavaScript simply set the variable to whatever you want using setProperty:

const newSliderSize = '100px'; // this could be a passed in dynamic value, etc.
document.getElementById("myRange").style.setProperty('--sliderSize', newSliderSize);

Here is a working fiddle of it all put together:

    const newSliderSize = '50px'; // this could be a passed in dynamic value, etc.
    document.getElementById("myRange").style.setProperty('--sliderSize', newSliderSize);

  .slider {
      --sliderSize: 25px; /* <---- Add this */
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--sliderSize); /* <---- Set the variable here */
      height: var(--sliderSize); /* <--- and here */
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

<input type="range" min="1" max="100" id="myRange" class="slider" />

本文标签： htmlsliderwebkitsliderthumb needed in javascriptStack Overflow