How do you target individual range sliders with CSS

Question

I have several range sliders and would like to have a different colour for the "runnable track” on each one. I have given each slider an individual CLASS (in this case it is sepiaSlider, but can’t find a reference online to the syntax to target that.

All I can think of trying is..

<input class="sliders sepiaSlider sepiaSliderID7643108" type="range" name="amountRange" min="0" max="100" value="0" step="1" oninput="this.form.amountInput.value=this.value">


<style>
.sepiaSlider input[type=range]::-webkit-slider-runnable-track {
    //styles
 }
</style>

...and that doesn’t work.

Could I target it by wrapping the input with a div with the class “sepiaSlider” and then do something like...

.sepiaSlider > input{}

instead?

Questions regarding how an element might be selected with CSS require you to show us the (relevant) [mcve] code; otherwise all we can do is guess. For better or worse. As regards your specific question: "*[could] I target it by wrapping...*" then yes, of course you can. Is it the 'best', easiest, most reliable or even the only way? Without your code who knows. — David Thomas, Jul 15 '18 at 21:28
Thanks for the advice, I am consistently bad at asking questions, it is something I am working on. I have updated the question. — , Jul 15 '18 at 21:51
You accidentally removed a large part of your question. Please [edit] to correctly do whatever edit you wanted to apply. — Yunnosch, Oct 30 '20 at 13:28

Temani Afif · Answer 1 · 2018-07-15T21:30:25.797

0

An idea is to use CSS variable to control the values you need and you don't have to repeat the CSS of the slider.

Here is an example where I change the background color:

::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: var(--c,yellow);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
.type1 {
  --c:red;
}
.type2 {
  --c:blue;
}

<input type="range" class="type1">
<input type="range" class="type2">
<input type="range">

edited Jul 15 '18 at 21:30

answered Jul 15 '18 at 21:26

Temani Afif

245,468
26
309
415

Oh wow, do you have a reference to this “--c” type syntax as I have never seen that before. Thanks! – Jul 15 '18 at 21:29
1

@Marley yes here is : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables – Temani Afif Jul 15 '18 at 21:30

How do you target individual range sliders with CSS

1 Answers1