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
Dansk iværksætter står bag et af Europas hurtigst voksende it-selskaber: Her er hele historien om hans op- og nedture
Det danske it-selskab Anytech365 leverer så høje vækstrater, at det er kommet med på Financial Times liste over de hurtigst voksende virksomheder i Europa. Her er historien om den danske iværksætter Janus Rægaard Nielsen, der har to konkurser bag sig og leder virksomheden fra Marbella.
Computerworld
Overblik: Så meget betaler danske virksomheder i løn til it-medarbejderne - se listerne her
Overblik: Der er meget stor forskel på løn-niveauet for it-medarbejderne i de danske virksomheder. Få overblikket over, hvor lønnen er højest og lavest her.
CIO
SAP's nye nordiske direktør: "De seneste uger har jeg besøgt en del kunder her i Norden - og alle talte om at vende tilbage til en eller anden form for standard."
Det store ryk til cloud brød med mange års it-konsolidering og skabte komplicerede it-miljøer. Men nu peger kundernes kompas den anden vej, fortæller erfaren SAP-boss efter nordisk rundrejse.
White paper
Spændende undersøgelse: Her ligger forretningsværdien i print-sikkerhed
En undersøgelse fra IDC viser, at der for virksomheder er en solid business case i at prioritere sikkerhed på print, og ethvert it-initiativ der kan nedbringe omkostninger, er attraktivt for ledere. I undersøgelsen har IDC lavet dybdegående interviews med 16 organisationer, som bruger en entreprise printerløsning, og disse interviews viser at der ligger stor forretningsværdi i denne løsning. Organisationerne blev bedt om at beskrive forskellen på ”før” og ”efter” og det viser sig, at de har opnået et mere sikkert print-miljø, samtidig med at der spares både penge og tid.