H-Slider

The Horizontal Slider (H-Slider) is an interactive component used to represent and adjust progress toward a goal in a horizontal orientation. It provides a visual and interactive way to track values within a defined range, making it suitable for goal progress tracking, thresholds, and user-driven adjustments.

Best Situations to Use

Use an H-Slider when you want to:

  • Display progress toward a target along a horizontal scale.

  • Allow users to manually adjust values within a defined range.

  • Represent bounded ranges such as percentages, ratings, or KPIs.

  • Provide a more compact alternative to gauges or progress bars.

Not Recommended for:

  • Scenarios requiring multi-dimensional comparisons (bar or line charts are better).

  • Highly precise data entry where numeric input fields are more effective.

Properties

Background

  • Shadow: Enable or disable shadow effect.

  • Shadow Color: Select shadow hue.

  • Shadow Transparency: Adjust shadow opacity.

  • Gradient Color: Apply gradient background styling to the slider.

General

  • Component Name: Assign a unique identifier.

  • Left / Top: Position the slider on the dashboard.

  • Height / Width: Set component dimensions.

  • Initial Visibility: Choose whether the slider is visible on the first preview.

  • Unit Value: Define measurement unit:

    • Auto (default)

    • Percent (for percentage-based progress).

  • Maximum / Minimum Limit: Define upper and lower bounds of the slider.

  • Interval: Set step increments (default = 1; if set to 2, increments move in multiples of 2).

  • Chrome Color: Change the body color of the slider.

  • Circle Color: Customize the slider knob’s color.

  • Circle Radius / Thickness: Adjust size and weight of the slider knob.

Label

  • Font Size: Adjust size of displayed label text.

  • Font Style: Set label style (normal, italic, etc.).

  • Font Family: Apply a consistent typeface.

Example Configurations

  • Basic H-Slider: Single-color background with default increments of 1.

  • Custom Range Slider: Minimum = 0, Maximum = 100, Interval = 5, Unit = Percent.

  • Styled Slider: Gradient background, custom knob color, increased knob radius for emphasis.

Notes

  • Use intervals wisely — large increments simplify user interaction but reduce precision.

  • For percentage-based progress tracking, always set Unit Value = Percent.

  • Pair the H-Slider with labels or tooltips for clarity in what the values represent.

PreviousGuided TourNextImage