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;
}
keysersoze Professor
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;
}
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.
keysersoze Professor
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.
RasmusTheR Seniormester
17. december 2018 - 21:21 #4
takker :-)
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

Opret Preview

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





Premium
Sådan migrerer du til SAP's nye ERP-platform S/4HANA på rekordtid: "Det står hurtigt klart, at det bliver fysisk umuligt at flytte alle kunder til en S/4-løsning inden 2025"
Danske SAP-kunder står for tiden over for valget om at skulle migrere til SAPs nyeste ERP-kerne SAP S/4HANA. Men hvilken tilgang skal du vælge, og hvor lang tid tager det egentlig at foretage en teknisk migrering af et ERP-system? Her er svaret fra it-leverandøren Itelligence, der har rundet 50 migreringsprojekter på verdensplan.
Computerworld
Huawei klar med patent på sit nye mobil-styresystem i ni europæiske lande
Den kinesiske mobilproducent Huawei er nu klar til at patentere sit nye styresystem til sine telefoner i ni europæiske lande.
CIO
Beslutningsprocesser, der slår ihjel
Men de fleste af os lever i en virksomhedskultur, hvor ingen er blevet fyret for at vælge IBM - og ingen er blevet fyret for at igangsætte endnu en analyse. Og man kommer måske et stykke vej med analyse. Men man kommer i mål med handling.
Job & Karriere
"Vi var fem mennesker, der fik 400 millioner kroner, et lokale på 12 m2 og et stempel fra Undervisningsministeriet. Det kalder jeg mit første start-up. Det blev til IT-Universitetet. "
"Da jeg var færdig med PhD´en så var vi fem mennesker, der fik 400 millioner kroner, et lokale på 12 m2 og et stempel fra Undervisningsministeriet. Så skulle vi bare have et nyt universitet op og køre på seks måneder. Det kalder jeg mit første start-up. Det blev til IT-Universitetet."
White paper
Sådan automatiserer du Service Management i den digitale tidsalder
EMA research afslører en voksende rolle for service management eller it-management teams. Både i forhold til at forbedre end-user oplevelsen og i forhold til at optimere it-performance generelt. Denne rolle for service management gør det, i stigende grad, til et strategisk innovationsben, som skal supportere løbende end-user behov. Samtidig skal der gøres opmærksom på effektiviseringer på tværs af it-initiativer, såsom change management og andre kritiske processer. I denne rapport kigger vi nærmere på, hvordan du kan skabe værdi med Micro Focus, og gøre det til en vigtig ressource for din it-organisation.