V-Slider

The Vertical Slider (V-Slider) is an interactive component used to represent or adjust progress in a vertical orientation. It allows users to track values within a defined range or manually adjust them by sliding the control knob up and down.

This component is often used for progress indicators, percentage completion, or interactive parameter adjustments in dashboards.

Best Situations to Use

Use the V-Slider when you want to:

• Display progress toward a target along a vertical scale.

• Let users manually adjust values within a fixed range.

• Represent bounded metrics such as percentages, thresholds, or ratings.

• Add a compact, intuitive alternative to gauges or progress bars in vertical layouts.

Not Recommended for:

• Comparing multiple metrics simultaneously (use bar or column charts).

• Highly precise data entry (use Input Box instead).

Properties

Background

• Shadow: Enable or disable a shadow effect.

• Shadow Color: Define the color of the shadow.

• Shadow Transparency: Adjust the opacity level of the shadow.

• Gradient Color: Apply gradient fill to the V-Slider background.

General

• Component Name: Assign a unique identifier.

• Left / Top: Position the V-Slider on the dashboard canvas.

• Height / Width: Define component size.

• Initial Visibility: Toggle whether the V-Slider is visible on first preview.

• Unit: Choose measurement units:

  • Auto (default)

  • Percent (for percentage-based progress).

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

• Interval: Set increments between steps (default = 1).

  • Example: Interval = 2 → increments occur in multiples of 2.

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

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

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

Label

• Font Size: Adjust label text size.

• Font Style: Apply styling such as italic or normal.

• Font Weight: Define text thickness (e.g., normal, bold, 300/600/900).

• Font Family: Choose a consistent typeface.

Example Configurations

1. Basic V-Slider

   • Default range: 0–100, Interval = 1.

   • Unit: Percent.

2. Custom Range V-Slider

   • Minimum = 10, Maximum = 500, Interval = 5.

   • Styled with chrome body color and custom knob radius.

3. Gradient Styled V-Slider

   • Gradient background applied with shadow.

   • Circle knob styled with contrasting colors for emphasis.

Notes

• Use intervals wisely — smaller intervals increase precision, while larger intervals simplify user interaction.

• V-Sliders work best when paired with labels or tooltips to indicate the meaning of values.

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