Avatar billede RasmusTheR Seniormester
16. december 2018 - 17:11 Der er 3 kommentarer og
1 løsning

Style forskellige range sliders

Jeg har fundet noget CSS som styler mine range sliders. Er der en smart måde, hvor jeg kan have forskellige styles på de forskellige sliders, jeg har på siden?

HTML:
<input type="range" min="0" max="1" value="1" step="0.01" id="myRangeRED">
<input type="range" min="0" max="1" value="1" step="0.01" id="myRangeYELLOW">
<input type="range" min="0" max="1" value="1" step="0.01" id="myRangeBLUE">

CSS:
input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #2497E3;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497E3;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #2497E3;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2497E3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #2497E3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #2497E3;
}
input[type=range]:focus::-ms-fill-upper {
  background: #2497E3;
}
Avatar billede keysersoze Guru
16. december 2018 - 20:29 #1
Sæt en class på - eller alternativt benyt det id du har sat - og så overskriv defaults, fx

.dinClass, #myRangeRED {
  background: red;
}
Avatar billede RasmusTheR Seniormester
16. december 2018 - 21:18 #2
Hvis jeg pakker hele CSS delen ind i .dinClass{} eller #myRangeRED {} virker CSS delen ikke. Så er det bare standard range slider som bliver vist.
Avatar billede keysersoze Guru
17. december 2018 - 00:16 #3
Du skal ikke pakke noget ind - kun tilføje. Din nuværende kode er formentlig fin som et udgangspunkt for alle, måske pånær farver, men det er så dem du tilføjer ekstra som i mit eksempel.
Avatar billede RasmusTheR Seniormester
17. december 2018 - 21:21 #4
takker :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester