Slider

The slider can be used to set the start and end of a range by supplying an array of values to the value prop.

Installation

gleam run -m gleez add slider

Variants

Solid

solid(Color): Where color is one of Colors

import components/ui/slider.{slider}
import lustre/attribute.{class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-col gap-4 w-full max-w-xs")], [
    slider([slider.solid(slider.Neutral), slider.md()]),
    slider([slider.solid(slider.Primary), slider.md()]),
    slider([slider.solid(slider.Secondary), slider.md()]),
    slider([slider.solid(slider.Success), slider.md()]),
    slider([slider.solid(slider.Info), slider.md()]),
    slider([slider.solid(slider.Warning), slider.md()]),
    slider([slider.solid(slider.Danger), slider.md()]),
  ])
}

Outlined

outlined(Color): Where color is one of Colors

import components/ui/slider.{slider}
import lustre/attribute.{class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-col gap-4 w-full max-w-xs")], [
    slider([slider.outlined(slider.Neutral), slider.md()]),
    slider([slider.outlined(slider.Primary), slider.md()]),
    slider([slider.outlined(slider.Secondary), slider.md()]),
    slider([slider.outlined(slider.Success), slider.md()]),
    slider([slider.outlined(slider.Info), slider.md()]),
    slider([slider.outlined(slider.Warning), slider.md()]),
    slider([slider.outlined(slider.Danger), slider.md()]),
  ])
}

Flat

flat(Color): Where color is one of Colors

import components/ui/slider.{slider}
import lustre/attribute.{class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-col gap-4 w-full max-w-xs")], [
    slider([slider.flat(slider.Neutral), slider.md()]),
    slider([slider.flat(slider.Primary), slider.md()]),
    slider([slider.flat(slider.Secondary), slider.md()]),
    slider([slider.flat(slider.Success), slider.md()]),
    slider([slider.flat(slider.Info), slider.md()]),
    slider([slider.flat(slider.Warning), slider.md()]),
    slider([slider.flat(slider.Danger), slider.md()]),
  ])
}

Ghost

ghost(Color): Where color is one of Colors

import components/ui/slider.{slider}
import lustre/attribute.{class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-col gap-4 w-full max-w-xs")], [
    slider([slider.ghost(slider.Neutral), slider.md()]),
    slider([slider.ghost(slider.Primary), slider.md()]),
    slider([slider.ghost(slider.Secondary), slider.md()]),
    slider([slider.ghost(slider.Success), slider.md()]),
    slider([slider.ghost(slider.Info), slider.md()]),
    slider([slider.ghost(slider.Warning), slider.md()]),
    slider([slider.ghost(slider.Danger), slider.md()]),
  ])
}

Attributes

Size

sm(): Small Size
md(): Medium Size
lg(): Large Size

import components/ui/slider.{slider}
import lustre/attribute.{class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-col gap-4 w-full max-w-xs")], [
    slider([slider.outlined(slider.Neutral), slider.sm()]),
    slider([slider.outlined(slider.Neutral), slider.md()]),
    slider([slider.outlined(slider.Neutral), slider.lg()]),
  ])
}