Skip to main content

Category Slider

This page describes the properties of the Category Slider, which allows users to make selections from a predetermined set of ascending options.

Category Slider
Category Slider

Content properties​

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

Data​

Options array<object>​

Allows you to set the labels and unique values for the items. You can add these labels and values directly from the user interface or use JavaScript by providing options in JSON format, like:

[
  {
    "label": "XS",
    "value": "xs"
  },
  {
    "label": "SM",
    "value": "sm"
  },
  {
    "label": "MD",
    "value": "md"
  },
  {
    "label": "LG",
    "value": "lg"
  },
  {
    "label": "XL",
    "value": "xl"
  }
]

Additionally, you can display dynamic data from queries or JS functions by binding the response to the Options property. For example, if you have a query named fetchData, you can bind its response using:

Example:

{{fetchData.data}}

If the query data is not in the expected format, you can use the map() function to transform it before passing it to the widget, like:

Example:

{{fetchData.data.map( p => ({label: p.size, value: p.size}))}}

Default value string​

Enables you to set a default option. This option is initially selected when the widget is loaded, representing the user's default input unless modified.

To set this property, assign it a value that corresponds to the value attribute of the desired option from the Options property.

Label​

Text string​

Sets the label on the widget.

Position string​

This property allows you to configure the label's placement.

Options:

  • Left: Aligns the label to the left side of the widget.
  • Top: Positions the label above the widget.

Alignment string​

This property is only available when you select Left from the Position property. It allows you to align the text to the left boundary or adjust it closer to the widget using the Right alignment option.

Width (in columns)number​

This property is only available when you select Left from the Position property. It allows you to control the proximity of the text to the widget, determining how close or far it can be positioned.

General​

Tooltip string​

Enables you to add hints or provide additional information to guide the user regarding the required input.

Show marks boolean​

When enabled, this property displays the labels below the slider element within the widget.

Visible boolean​

Controls the visibility of the widget. If you turn off this property, the widget would not be visible in View Mode. Additionally, you can use JavaScript by clicking on JS next to the Visible property to conditionally control the widget's visibility.

For example, if you want to make the widget visible only when the user selects "Yes" from a Select widget, you can use the following JavaScript expression:

{{Select1.selectedOptionValue === "Yes"}}

Disabled boolean​

Prevents users from selecting the widget. Even though the widget remains visible, user input is not permitted. Additionally, you can use JavaScript by clicking on JS next to the Disabled property to control the widget's disable state conditionally.

For example, if you want to allow only a specific user to select the option, you can use the following JavaScript expression:

{{appsmith.user.email=="john@appsmith.com"?false:true}}

Animate Loading boolean​

Controls whether the widget is displayed with a loading animation. When enabled, the widget shows a skeletal animation during the loading process. Additionally, you can control it through JavaScript by clicking on the JS next to the property.

Events​

When the event is triggered, these event handlers can execute queries, JS functions, or other supported actions.

onChange​

Specifies one or multiple actions to be triggered when the user changes the value of the Number Slider.

Style properties​

Style properties allow you to change the look and feel of the widget.

General​

Size string​

Defines the size of the slider.

Options:

  • Small
  • Medium
  • Large

Label styles​

Font color string​

Represents the text color of the widget, specified as a CSS color value. Additionally, the font color can be programmatically modified using JavaScript functions.

Font size string​

Determines the font size of the label. It accepts CSS font-size values and can also be programmatically modified using JavaScript functions.

Emphasis string​

Enables you to select a font style for the widget, such as bold or italic. Additionally, the font style can be programmatically modified using JavaScript functions.

Color​

Fill color string​

Represents the color of the slider, specified as a CSS color value. Additionally, the font color can be programmatically modified using JavaScript functions.

Reference properties​

Reference properties are properties that are not available in the property pane but can be accessed using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to get the visibility status, you can use CategorySlider1.isVisible.

value string​

Allows you to access the value that has been selected with the slider.

Example:

{{CategorySlider1.value}}

isVisible boolean​

The isVisible property indicates the visibility state of a widget, with true indicating it is visible and false indicating it is hidden.

Example:

{{CategorySlider1.isVisible}}

Methods​

Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.

These methods are asynchronous and return a Promise. You can use the .then() block to ensure execution and sequencing of subsequent lines of code in Appsmith.

setDisabled (param: boolean): Promise​

Sets the disabled state of the widget.

Example:

CategorySlider1.setDisabled(false)

setVisibility (param: boolean): Promise​

Sets the visibility of the widget.

Example:

CategorySlider1.setVisibility(true)

setValue (param: string): Promise​

Allows you to dynamically set the value of the widget.

Example:

CategorySlider1.setValue('xl')