slider

Sliders: pick a number from a range by dragging or with the arrow keys.

slider.slider([attribute.name("volume"), attribute.min("0"), attribute.max("100"), attribute.value("40")])

A slider is the browser’s own range input in the theme’s primary colour, so it works with a keyboard, a pointer and a form as usual. Label it, and show the value beside it when it matters.

Types

Orientation

</>

pub type Orientation {
  Horizontal
  Vertical
}

Constructors

```
Horizontal
```
```
Vertical
```
Upright, with the lowest value at the bottom. Ten rems tall unless given a height.

Values

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

fill_class

</>

pub fn fill_class(orientation: Orientation) -> css.Class

range

</>

pub fn range(
  words words: words.Words,
  label label: String,
  min min: Int,
  max max: Int,
  low low: Int,
  high high: Int,
  low_name low_name: String,
  high_name high_name: String,
  attributes attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

A range with two thumbs, for a lower and an upper value, such as a price between £20 and £80. Each thumb is its own range input, named low_name and high_name, so both submit with a form and each can be moved with the keyboard; the thumbs cannot pass each other. label names the pair, and each thumb is announced as its minimum or maximum, in the words’ language.

range_class

</>

pub fn range_class(orientation: Orientation) -> css.Class

slider

</>

pub fn slider(
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

slider_class

</>

pub fn slider_class() -> css.Class

thumb_class

</>

pub fn thumb_class(orientation: Orientation) -> css.Class

thumbs

</>

pub fn thumbs(
  words words: words.Words,
  label label: String,
  min min: Int,
  max max: Int,
  orientation orientation: Orientation,
  values values: List(#(String, Int)),
  attributes attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

A range with a thumb for each of values, given as #(name, value) in order, such as three thumbs splitting a day into four parts. Each is a range input submitted under its name, and none can pass its neighbours. The track is filled from the first thumb to the last. Two thumbs are announced as the minimum and maximum; more as “2 of 3”.

track_class

</>

pub fn track_class(orientation: Orientation) -> css.Class

vertical

</>

pub fn vertical() -> attribute.Attribute(msg)

Stand a single slider upright, lowest value at the bottom. Put it in the slider’s attributes.