Deepyr Documentation

Range

The Range slider is a controlled component. Its state must be managed by a parent using `value` and `onValueChanged`.

Value: 40

class MySlider extends StatefulComponent {
  @override
  State<MySlider> createState() => _MySliderState();
}

class _MySliderState extends State<MySlider> {
  double _currentValue = 40.0;

  @override
  Component build(BuildContext context) {
    return Range(
      value: _currentValue,
      onValueChanged: (newValue) {
        setState(() => _currentValue = newValue);
      },
      min: 0,
      max: 100,
    );
    return p([text('Value: ${_currentValue.toInt()}')]);
  }
}

With steps and measure

|||||

12345

Container(
  [
    Range(
      value: 25,
      onValueChanged: (val) { /* handle state */ },
      min: 0,
      max: 100,
      step: 25,
    ),
    div(
      classes: 'flex justify-between px-1 mt-2 text-xs',
      [for (var i = 0; i < 5; i++) span([text('|')])],
    ),
    div(
      classes: 'flex justify-between px-1 mt-2 text-xs',
      [for (var i = 1; i <= 5; i++) span([text(i.toString())])],
    ),
  ],
  style: [Size.wFull, Size.maxWxs],
)

Neutral color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.neutral],
)

Primary color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.primary],
)

Secondary color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.secondary],
)

Accent color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.accent],
)

Success color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.success],
)

Warning color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.warning],
)

Info color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.info],
)

Error color

Value: 40

// This requires a stateful parent to manage the value.
Range(
  value: 40,
  onValueChanged: (val) { /* ... */ },
  style: [Range.error],
)

Sizes

Value: 30

Value: 40

Value: 50

Value: 60

Value: 70

Range(value: 30, style: [Range.xs]),
Range(value: 40, style: [Range.sm]),
Range(value: 50, style: [Range.md]), // Default
Range(value: 60, style: [Range.lg]),
Range(value: 70, style: [Range.xl]),

Range with custom color and no fill

Use the `css` property to set CSS variables and `classes` for other utilities.

Value: 40

Range(
  value: 40,
  onValueChanged: (val) { /* handle state */ },
  classes: 'text-blue-300',
  css: Styles.raw({
    '--range-bg': 'orange',
    '--range-thumb': 'blue',
    '--range-fill': '0',
  }),
)