• Documentation
  • Ask a Question
  • Zeroplat.io
  • Documentation
  • Ask a Question
  • Zeroplat.io
  • Introduction
    • Welcome to Zeroplat
    • Video Intro
  • Get Started
    • Requirements
    • Installation
  • Management
    • Resources
    • SaaS
      • Multi-tenancy
      • Editions
    • Permissions
    • Organization Units
    • Language
      • Languages
      • Language Texts
    • Roles
    • User
      • Users
      • Invite Users
    • Audit Logs
  • Visual Builder
    • Overview
    • Resources
      • Menu & Navigation
      • Pages
      • Dashboards
      • Components
      • Generate Pages from Datasource
    • Design
      • JS Query
      • Transformer
      • Variable
    • Event Designer
      • Tasks
        • Execute query
        • Start workflow
        • Show page
        • Close Page
        • Set variable
        • Show notification
        • Set components props
      • Switch
        • If
        • Confirm box
        • Confirm popover
    • Data
    • Preview & Publish
    • Components
      • Common Properties
        • Layout
        • Style
        • Actions
        • Validations
        • Tooltip
      • Inputs
        • Button
        • Input
        • InputNumeric
        • ComboBox
        • MulticolumnCombobox
        • Checkbox
        • CheckboxGroup
        • Switch
        • RadioGroup
        • ToggleButtonGroup
        • LocalizedInput
        • Slider
      • Business
        • OrganizationUnitBrowser
        • RoleBrowser
        • UserBrowser
      • Data display
        • DataGrid
      • Editors
        • QuillEditor
      • Feedback
        • Alert
        • Progress
      • File
        • Dropzone
        • FileButton
        • FileInput
      • Layout
        • SplitLayout
      • Navigation
        • TabBar
      • Pickers
        • DatePicker
        • DateTimePicker
        • DateRangePicker
        • DateCalendar
        • TimePicker
        • IconPicker
      • Surfaces
        • Card
      • Charts
        • AreaChart
  • Backend
    • Overview
  • Integrations
    • Overview
    • Environments
    • Database
      • MS SQL
      • SQL Lite
      • My SQL
      • PostgreSQL
    • API
      • Rest API
      • SMTP
      • Google Sheets
      • Twillio SMS
    • Javascript
      • Variable
      • Transformer
      • JS Query
    • Zeroplat Hosted
      • Zeroplat E-mail
  • Workflow (BPM)
    • Overview
    • Building and managing workflows
    • Inbox
    • Outbox
  • Marketplace
    • Overview
    • Management

Slider

2 views 0

Written by Zeroplat
20 September 2025

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.

Was this helpful?

Yes  No
Related Articles
  • DateCalendar
  • Progress
  • TimePicker
  • IconPicker
  • DateTimePicker
  • DateRangePicker

Didn't find your answer? Contact Us

Previously
LocalizedInput
Up Next
Business
Copyright 2025 Zeroplat.io. All Rights Reserved