Skip to main content

Getting started with sliders and ratings

Learn how to provide number value ranges from which users can select in Retool web apps.

Sliders and ratings are components that enable a user to define a number value or a range of number values between a minimum and a maximum. Use these components in forms to collect user feedback or as controllers for other components.

Retool provides the following range and rating components:

  • Range Slider, which enables a user to select a range of number values using a slider.
  • Rating, which enables a user to select a number value on a scale using icons.
  • Slider, which enables a user to select a number value using a slider.
Demo

Features​

Key features of sliders and ratings include:

  • Configurable start values and minimum and maximum.
  • Optional icons, labels, and tooltips.
  • Event handlers triggered on change.
  • Input validation.
  • Customizeable styles.

Specify content options​

The Content section of the Inspector contains settings that control the content of a component, such as:

  • Default value, which defines the initial value of the component. This is Start value and End value for Range Slider.
  • Minimum (if applicable) and Maximum, which define the bounds of the input component.
  • Add-ons, which define any labels, icons, and tooltips.

Configure user interaction​

The Interaction section of the Inspector contains settings that control user interaction and validation, such as:

  • Event handlers, which listen for and handle interactions with your components.
  • Validation rules, which define the types of user inputs that your components accept.

Event handlers are triggered on changes to the value of the component. Use event handlers to call queries, control components, or perform another action.

For example, you can use a Range Slider to dynamically filter a Table. Set the event hander Action to Control component. Select the table, and update the Method to Set filter stack. Enter a list of filters that you want to apply to the table. In this case, use the value.start and value.end of the Range Slider to define a minimum and maximum value for a column:

[ { columnId: "amount", operator: ">", value: {{ self.value.start }} }, { columnId: "amount", operator: "<", value: {{ self.value.end }} } ]

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.

The Rating component also includes several Icon options in this section.