Range class

A range slider component used to select a value by sliding a handle. It renders an <input type="range">.

The Range is a controlled component. Its state is not managed internally. You must provide its current value and handle state changes with the onValueChanged callback. This callback provides the new value as a double, abstracting away the string parsing from the DOM event.

Example of state management in a StatefulComponent:

class VolumeControl extends StatefulComponent {
  @override
  State<VolumeControl> createState() => _VolumeControlState();
}

class _VolumeControlState extends State<VolumeControl> {
  double _volume = 40.0;

  @override
  Component build(BuildContext context) {
    return Range(
      value: _volume,
      onValueChanged: (newValue) {
        setState(() => _volume = newValue);
      },
      min: 0,
      max: 100,
      step: 10,
      style: [Range.primary],
    );
    return p([text('Volume: \${_volume.toInt()}%')]);
  }
}

Inheritance

Constructors

Range({double value = 0, ValueChanged<double>? onValueChanged, double min = 0, double max = 100, double? step, bool disabled = false, String tag = 'input', List<RangeStyling>? style, String? id, String? classes, Styles? css, Map<String, String>? attributes, Map<String, List<UiEventHandler>>? eventHandlers, Key? key}): Creates a Range slider component.
const

Properties

baseClass → String: Gets the base CSS class for this component (e.g., "btn" for a button).
no setter
child → Component?: A single child component to be rendered. Mutually exclusive with children.
finalinherited
children → List<Component>?: The list of child components to be rendered within this component. Mutually exclusive with child.
finalinherited
classes → String?: A string of additional, space-separated CSS classes to apply directly. This is an escape hatch for utilities not yet abstracted by deepyr or for applying styles to primitive Jaspr components.
finalinherited
combinedClasses → String: Computes the combined string of CSS classes to be applied to the component's root element.
no setterinherited
componentAttributes → Map<String, String>: Gets the final map of HTML attributes for the component.
no setterinherited
css → Styles?: A Jaspr Styles object for applying inline CSS to the root element.
finalinherited
disabled → bool: If true, the slider is non-interactive.
final
eventHandlers → Map<String, List<UiEventHandler>>: A map for custom or less common event handlers. The key is the event name (e.g., "focus", "blur"), and the value is a list of handlers.
finalinherited
eventMap → Map<String, EventCallback>: Constructs the map of event handlers for the underlying DomComponent.
no setterinherited
hashCode → int: The hash code for this object.
no setterinherited
id → String?: The HTML id for the root element.
finalinherited
key → Key?: Controls how one component replaces another component in the tree.
finalinherited
max → double: The maximum value of the slider.
final
min → double: The minimum value of the slider.
final
onChange → UiInputEventHandler?: finalinherited
onClick → UiMouseEventHandler?: finalinherited
onInput → UiInputEventHandler?: finalinherited
onKeyDown → UiKeyboardEventHandler?: finalinherited
onKeyUp → UiKeyboardEventHandler?: finalinherited
onMouseEnter → UiMouseEventHandler?: finalinherited
onMouseLeave → UiMouseEventHandler?: finalinherited
onValueChanged → ValueChanged<double>?: Callback function invoked when the slider's value changes.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
step → double?: The granularity that the value must adhere to.
final
style → List<Styling>?: A list of type-safe Styling instances (general or component-specific utility classes) to apply for styling.
finalinherited
tag → String: The HTML tag for the root element of this component (e.g., "div", "button").
finalinherited
userProvidedAttributes → Map<String, String>: Gets the attributes directly provided by the user when the component was instantiated. Returns an empty map if no attributes were provided.
no setterinherited
value → double: The current value of the slider.
final

Methods

build(BuildContext context) → Component: Describes the part of the user interface represented by this component.
override
configureAttributes(UiComponentAttributes attributes) → void: Configures component-specific HTML attributes.
override
copyWith({String? id, String? classes, Styles? css, Map<String, String>? attributes, Map<String, List<UiEventHandler>>? eventHandlers, Key? key}) → Range: An abstract method that concrete components must implement to create a copy of themselves with new values.
override
createElement() → Element: Creates a StatelessElement to manage this component's location in the tree.
inherited
mergeClasses(String? originalClasses, String? newClasses) → String?: Merges two CSS class strings, safely handling null or empty inputs.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
shouldRebuild(covariant Component newComponent) → bool: Implement this method to determine whether a rebuild can be skipped.
inherited
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Constants

accent → const RangeStyle: Accent color. range-accent
error → const RangeStyle: Error color. range-error
info → const RangeStyle: Info color. range-info
lg → const RangeStyle: Large size. range-lg
md → const RangeStyle: Medium size (default). range-md
neutral → const RangeStyle: Neutral color. range-neutral
primary → const RangeStyle: Primary color. range-primary
secondary → const RangeStyle: Secondary color. range-secondary
sm → const RangeStyle: Small size. range-sm
success → const RangeStyle: Success color. range-success
warning → const RangeStyle: Warning color. range-warning
xl → const RangeStyle: Extra-large size. range-xl
xs → const RangeStyle: Extra-small size. range-xs