SLIDER.md

Slider

Sliders allow users to make selections from a range of values. There are two types of sliders: continuous and discrete. Default range is 0-100.

Element

<label class="slider">
  <input type="range">
  <span></span>
</label>

Example

<label class="slider">
  <input type="range">
  <span></span>
</label>

<label class="slider">
  <input type="range" min="4" max="8">
  <span></span>
</label>

With tooltip example

<label class="slider">
  <input type="range">
  <span></span>
  <div class="tooltip"></div>
</label>

With icon example

<nav>
  <i>sunny</i>
  <label class="slider">
    <input type="range">
    <span></span>
  </label>
  <i>rainy</i>
</nav>

In field elements example

<div class="field middle-align">
  <label class="slider">
    <input type="range">
    <span></span>
  </label>
</div>

Go to

Begin, Elements, Helpers, Settings, Summary, beercss.com

Badge, Button, Card, Checkbox, Chip, Container, Dialog, Expansion, Grid, Icon, Input, Layout, Main layout, Media, Menu, Navigation, Overlay, Page, Progress, Radio, Select, Slider, Switch, Table, Tabs, Textarea, Snackbar, Tooltip, Typography