Slider

Select a single value or specify a range by choosing values for both its ends.

Overview

The Slider component is a user-friendly way to select a value from a range. It consists of a track with a handle that can be moved along the track to select a value. The Slider component is commonly used for tasks such as adjusting the volume of a media player or setting a number within a specific range.

Here are some of the key features of the Slider component:

• User-friendly

• Interactive

• Allows users to select a value from a range

• Commonly used for tasks such as adjusting the volume of a media player or selecting a number within a specific range

Changing the Properties

Here are the main properties you can configure on the Slider element

Multiple values

A slider can contain multiple values and specify a range between two or more numbers.

Choosing a Type

The Type attribute will determine the orientation of the slider. The Slider type can be horizontal or vertical.

Adjusting Steps

By default, the increment value of the slider is set to 1 but you can customize the increment value of the slider by adding an incrementing number to the step property.

Adding Min/Max values

Min and Max values can be specified to customize the range of your slider.

Setting a unit

By default, the slider's unit is set to decimal. But the unit can be customized to Currency, Percent or Custom.

Advanced Options

Show Pin

To show a pin when the slider is moving.

Show Tick Marks

when there is steps

Disable swap

Adding Interactions

Interactions define what will happen when users interact with the slider component. You can find a list of interactions available here.

Here are the available interactions for the Slider component:

• On Change: The event fired when the slider value changed.

Styling the Slider

From the Styles panel, you can customize styling attributes for the Slider component:

• Label: to customize the label that is displayed on top of the slider.

• Unit: to customize the unit label.

• Track: to customize the track styling.

• Pin: to customize the style of the Pin if enabled in the advanced options.

• Thumb: to customize the style of the slider thumb.

Customize Slider Backgrounds with Gradients

Enhance the visual appearance of your Avonni Sliders by applying custom gradient backgrounds. Here's how to apply gradients:

1. Gradient Settings: In the Style panel, locate the "Background" section. Here, you'll find new gradient settings.

2. Customize Your Gradient:

   • Gradient Type: Choose between "Linear" or "Radial" for different gradient effects.

   • Gradient Angle (Linear): Set the direction of your linear gradient.

   • Gradient Colors: Select the colors you want to include in the gradient.

   • Color Positions: Use percentages (%) to define where each color starts and stops within the gradient.