Slider

What the Avonni Slider does

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 choose 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.

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.

• Currency: Displays the value as a currency (e.g., $, €, £).

• Decimals: Shows the value with decimal places.

• Percent: Shows the value as a percentage.

• Custom: Lets you create your labels with corresponding values. These custom labels will be shown on the slider next to the appropriate value. For example, you could create labels like "Low", "Medium", and "High" to represent different ranges on your slider.

Advanced Options

Show Pin

Displays a marker on the slider to highlight the current value.

Show Tick Marks

Adds tick marks along the slider to show the different steps or values. This is useful when you've set specific steps for the slider.

Disable swap

This option prevents the slider's minimum and maximum values from being swapped. By default, if you set the minimum value to be greater than the maximum value, the slider will automatically swap them. Enabling "Disable Swap" prevents this behavior.

Adding Interactions

Interactions make your slider respond to user actions. You can choose what happens when someone interacts with the slider. For instance, when the slider's value changes, you might want to display a message or trigger another part of your flow.

Here's a list of the available interactions.

• On Change: This is triggered when the slider's value is modified. For example, you could configure this to display a toast message with the new slider value or open a new screen flow to collect additional information based on the selected value.

Styling the Slider

The "Style" panel lets you change how your slider looks.

Here are the different parts you can customize:

• Label: Change the text shown above the slider.

• Unit: Add a unit label next to the slider value (e.g., "km", "years", "$").

• Track: Change the appearance of the slider track (the line the slider moves along).

• Pin: Customize the look of the pin that marks the current value (if you've enabled it in the advanced options).

• Thumb: Change the appearance of the slider thumb (the draggable part of the slider)

Customize Slider Backgrounds with Gradients

Enhance the visual appearance of your Avonni Sliders by applying custom gradient backgrounds. Here's how to use 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.