Slider Widget
A range slider for @bind — maps discrete Julia values to an HTML range input via index mapping.
Preview
A rendered SliderWidget as it appears in a notebook:
1
Usage
Pass a positional AbstractVector argument to get a widget struct for @bind. Keyword-only calls still produce a VNode (island).
julia
using Suite
# Widget mode (positional arg → struct for @bind)
@bind temperature Suite.Slider(0:100; default=20)
@bind opacity Suite.Slider(0.0:0.01:1.0; default=0.5)
@bind color Suite.Slider(["red", "green", "blue"]; default="green")
# Island mode (keyword-only → VNode for Therapy.jl)
Suite.Slider(; min=0, max=100, default_value=50)Options
| Kwarg | Type | Default | Description |
|---|---|---|---|
| default | eltype(values) | first(values) | Initial value (snaps to nearest) |
| show_value | Bool | true | Display current value next to slider |
| label | String | "" | Label text shown before slider |
| class | String | "" | Additional CSS classes on wrapper |
| theme | Symbol | :default | Suite.jl theme |
| max_steps | Integer | 1_000 | Downsample values to at most N steps |
Bond Protocol
The SliderWidget implements the full bond protocol using index mapping:
| Method | Returns | Description |
|---|---|---|
| initial_value(s) | s.default | Initial Julia value before browser renders |
| possible_values(s) | 1:length(s.values) | Integer indices for precomputing states |
| transform_value(s, idx) | s.values[idx] | Map index back to Julia value |
| validate_value(s, val) | Bool | Check index is Integer in valid range |
Index Mapping
The HTML range input goes from 1 to length(values). JavaScript sends the integer index, and transform_value maps it back to the actual Julia value. This enables binding to any Julia type.
julia
s = Suite.Slider(["low", "medium", "high"])
# HTML: <input type="range" min="1" max="3" value="1">
# User drags to position 2 → JS sends index 2
# transform_value(s, 2) → "medium"
# The bound variable becomes "medium" Examples
Integer Range
julia
@bind n Suite.Slider(1:100)
# n is an Int in 1:100Float Range
julia
@bind alpha Suite.Slider(0.0:0.01:1.0; default=0.5)
# alpha is a Float64 in 0.0:0.01:1.0Arbitrary Values
julia
@bind city Suite.Slider(["NYC", "LA", "Chicago", "Houston"])
# city is a StringWith Label
julia
@bind temp Suite.Slider(0:100; default=20, label="Temperature")Next Steps
- The @bind Pattern — How the bond protocol works under the hood
- Widget Overview — Full mapping table and three-tier architecture
- Slider Island — The Wasm-powered island version of Slider