Transcript

In this Quick Tip, we're going to learn about the slider input element. The slider input is an interactive element that slides between a numeric range. Bubble lets you build flexible forms, and with the slider input, you can get creative with what type of forms and displays you can build!

When you add a slider input element to the page and look at its property editor, you'll see unique properties. These properties are Min value, Max value, Step, and Slider type. You define a minimum value for the slider to start at and a maximum value for where you want the slider to end. You set the Step value to tell the slider how much it should increment by.

Finally, you can change the Slider type from Simple to Range, which will give another handle on our slider; one handle acts as our minimum value and the other acts as our maximum.

You can set any of these properties to dynamic data and get these values in expressions! You can customize the style, or if it's horizontal or vertical.

Being creative with the slider input element, you can use the value of the slider to help create a carousel of images, or show price ranges in a repeating group, and of course build out a custom form.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.