🎚️Slider control

The input slider control component is represented visually as a horizontal track with a moveable element, known as the thumb, which users can drag along the track.

Now, with this component, users can slide this to adjust values like the temperature settings in smart home devices or price ranges in online shopping filters.

👉 The Tag

To insert a slider control into your interface, use the following tag format:

[component:input-slider:<min>:<max>:<step>:<value>

📍 Where to add the tag: A rectangle layer.

Replace <min>, <max>, <step>, and <value> with your desired numerical values:

• <min> is the minimum value the slider can represent.

• <max> is the maximum value the slider can represent.

• <step> is the incremental value between the range.

• <value> is the current value of the slider.

Example usage:

[component:input-slider:0:100:5:25]

This creates a slider that ranges from 0 to 100, moves in increments of 5, and has an initial value of 25.

🎨 Customize its style

To enhance the visual appeal of your slider control, apply custom styling. Here are the tags you can use to define the style:

• Background Color: [style:bg-color:#HEXCODE] - This sets the background color of the slider track. Replace #HEXCODE with the 6-digits hex color code of your choice.

• Active Color: [style:active-color:#HEXCODE] - This changes the color of the active portion of the slider (from the minimum value to the current thumb position). Replace #HEXCODE with your preferred 6-digits hex color code.

• Thumb Color: [style:color:#HEXCODE] - This determines the color of the thumb, which is the draggable circle on the slider. Use a 6-digits hex color code to specify the color.

For example:

[style:bg-color:#42476ee]    // Sets the background color of the slider track to dark blue.
[style:active-color:#d9d9d9]    // Changes the active portion of the slider to a light grey.
[style:color:#50e3c2]    // Sets the thumb color to a mint green.

Incorporate these style tags in your code to customize the look of your input slider to match your interface design.

🏷️How to add the tag

In order to successfully integrate an input slider control into your user interface, follow these steps:

1. Draw a rectangle on your design canvas to represent the slider control. We recommend a minimum height of 32px at least.

2. Incorporate the following tag into the rectangle to embed the slider functionality:

[component:input-slider:0:100:5:25]

3. To customize the slider's appearance, add these style tags directly after the slider component tag:

[style:bg-color:#42476e][style:active-color:#d9d9d9][style:color:#50e3c2]

4. Make sure your user interface design includes a submit button. Place the tag [action:submit] in the button to link the action correctly.

🔗 Binding with your API

1. Ensure your POST or PATCH API request is properly set up.

2. From the left side of the screen, under the Elements section, select the slider control, or directly tap on the slider image displayed in the center of the screen.

3. Navigate to the Form Data section on the right, choose your API collection, and then select either the POST or PATCH request. Finally, specify the variable you wish to use.

4. Proceed by selecting the submit button and configuring the form response action to finalize the integration.

5. And you're set! You should be ready to test it with Bravo Vision! 🎉

💾 Example design file

Not found

Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the community.