EssenceUI.Components.Slider (Essence UI v0.2.0)

Copy Markdown View Source

A Slider component for selecting values from a range.

Supports various sizes, variants, colors, and both single and range sliders. Wraps EssenceUI.Primitives.Slider.

Examples

<.slider default_value={[50]} />

<.slider default_value={[25, 75]} />

<.slider size="3" variant="soft" color="blue" />

<.slider disabled />

<.slider orientation="vertical" />

Props

  • size - Slider size: "1", "2", "3" (default: "2")
  • variant - Slider variant: "surface", "classic", "soft" (default: "surface")
  • color - Color theme from accent color palette (default: none)
  • high_contrast - Increase color contrast (default: false)
  • radius - Border radius: "none", "small", "medium", "large", "full" (default: none)
  • orientation - Slider orientation: "horizontal", "vertical" (default: "horizontal")
  • value - Controlled value array (e.g., [50] or [25, 75])
  • default_value - Initial value array (default: [50])
  • min - Minimum value (default: 0)
  • max - Maximum value (default: 100)
  • step - Step increment (default: 1)
  • disabled - Whether the slider is disabled
  • name - Form name attribute
  • Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control

Summary

Functions

slider(assigns)

Functions

slider(assigns)

Attributes

  • color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
  • high_contrast (:boolean) - Whether to increase color contrast with the background.
  • m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
  • id (:string) - Defaults to nil.
  • size (:string) - Slider size from 1 to 3. Controls overall dimensions and thumb size. Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Visual style variant. One of 'surface', 'classic', or 'soft'. Defaults to "surface". Must be one of "surface", "classic", or "soft".
  • orientation (:string) - Slider orientation. One of 'horizontal' or 'vertical'. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • value (:list) - Controlled value array. Can be [value] for single or [min, max] for range. Defaults to nil.
  • default_value (:list) - Initial value array. Can be [value] for single or [min, max] for range. Defaults to [50].
  • min (:integer) - Minimum value. Defaults to 0.
  • max (:integer) - Maximum value. Defaults to 100.
  • step (:integer) - Step increment. Defaults to 1.
  • disabled (:boolean) - Whether the slider is disabled. Defaults to false.
  • name (:string) - Form name attribute. Defaults to nil.
  • on_value_change (:string) - LiveView event when value changes. Defaults to nil.
  • class (:string) - Additional CSS classes to add to the element. Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Global attributes and event handlers. Supports all globals plus: ["form", "aria-label", "aria-labelledby", "aria-describedby"].