Slider

The Slider component allows users to select a numeric value within a defined range by dragging a handle. It is commonly used for settings such as volume control, ranges, or adjustable configurations.

1. Basic Properties

• Name: The unique identifier of the slider (e.g., Slider1).
• Default Value: The initial numeric value displayed (e.g., 40).

States

• Disabled: Makes the slider non-interactive.
• Hidden: Hides the slider from the UI while keeping it available in logic.
• Marks: Displays tick marks along the slider track for better guidance.

2. Layout

Controls how the slider behaves across responsive screen sizes and spacing relative to other components.

📘 See Common Properties → Layout.

3. Events

• onChange: Triggered whenever the slider value changes (user drags the handle).

4. Range & Step

• Min: The minimum selectable value (default: 0).
• Max: The maximum selectable value (default: 100).
• Step: Defines increments between values (e.g., 1, 5, 10).

5. Size & Value Display

• Size: Choose between small or medium.
• Value Label Display: Controls how the current value is displayed:
  • auto → Shows value when sliding.
  • off → Hides value labels.
  • on → Always shows the value label.

6. Style

Custom styles can be applied for further UI customization.

📘 See Common Properties → Style.

✅ With its configurable range, step, and value display, the Slider component is ideal for numeric input scenarios where users benefit from a more visual and interactive control compared to plain text fields.