ArcaneSlider

Use sliders for bounded numeric choices where direct manipulation is more efficient than typing.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: slider

Preview + Code

Volume 42

Code

double volume = 42;

ArcaneSlider(
  label: 'Volume',
  value: volume,
  onChanged: setVolume,
)

ArcaneSlider#

Use sliders for bounded numeric choices where direct manipulation is more efficient than typing.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/input/slider.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneSlider

Use sliders for bounded numeric choices where direct manipulation is more efficient than typing.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: slider

Preview + Code

Volume42

Code

double volume = 42;

ArcaneSlider(
  label: 'Volume',
  value: volume,
  onChanged: setVolume,
)

ArcaneSlider#

Use sliders for bounded numeric choices where direct manipulation is more efficient than typing.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/input/slider.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneSlider

Use sliders for bounded numeric choices where direct manipulation is more efficient than typing.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: slider

Preview + Code

Volume 42

Code

double volume = 42;

ArcaneSlider(
  label: 'Volume',
  value: volume,
  onChanged: setVolume,
)

ArcaneSlider#

Use sliders for bounded numeric choices where direct manipulation is more efficient than typing.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/input/slider.dart

See the Component Catalog for the full exported surface and source mapping.