Skip to main content

Slider

Kartverket har to størrelser på en slider; extra small/small og medium/large. Implementasjon av denne komponenten krever Javascript, i tillegg til CSS-klassene fra KVIB, for å håndtere verdi-endringer. Se her for demonstrasjon av oppførselen til slideren open_in_new. Under følger statiske bilder av slideren for å vise forskjell på de ulike størrelsene, sammen med eksempelkode. Bredden til .slider er satt til 100%, slik at slider-bredden tilpasses ved å legge elementene i f.eks. et <div>-element.

For å style <label>-elementet, skal egne CSS-klasser fra Typografi benyttes.

Extra small og small​

slider-xs-s

  <label for="range-slider"> Skriv tekst her</label>
  <input type="range" id="range-slider" name="range-slider" class="kv-range-slider kv-range-slider--xs-s"
           min="0" max="100" />

Medium og large​

slider-m-l

 <label for="range-slider">Skriv tekst her</label>
 <input type="range" id="range-slider" name="range-slider" class="kv-range-slider kv-range-slider--m-l"
        min="0" max="100" />