slider

Use the slider component to select a numeric value within a defined range by dragging a thumb control.

Typical use cases include price ranges, quantity selection, thresholds, and score inputs.

Slider component

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure	Description
instanceId	The unique identifier for the slider component.
label	Provide a label/name for the slider input. Label is displayed above the slider.
minimum	Sets the minimum numeric value of the slider range.
maximum	Sets the maximum numeric value of the slider range.
step	Defines the increment between valid slider values. For example, step: 5 allows values in increments of five.

Other options	Description
color	Sets the color of the slider track and thumb. Color conditions using the when property enable dynamic color options. The first condition evaluated to true will be used.
displayValue	Controls the value overlay shown for the selected slider value. You can configure formatting, hide the value, set subtle styling, or show custom value text.
errorText	Add text, string, or expressions to show text under the slider indicating an error or invalid value. ErrorText is shown in isNegative styling.
helperText	Add text, strings, or expressions to guide users by displaying text beneath the slider. HelperText is displayed only when there is no errorText property set.
initialValue	The value the slider will load with when the screen initially loads. Use this to preset a default position on the slider.
isHidden	If true the slider will be hidden. If set to false the field will be shown.
isIgnored	When true, the field will be ignored during data save, and the slider value will not be stored. This property is only applied when using the submit-form action.
isRequired	Set to true when the field is required, which is indicated by a grey asterisk. Set to false, the slider is optional.
leftElement	Add a visual context element to the left of the slider. Supported element types are icon or text.
rightElement	Add a visual context element to the right of the slider. Supported element types are icon or text.
style	The following property setting is available: isDisabled - makes the slider read-only.
value	The value to show for the slider. This is typically a numeric value representing the selected position. This can be combined with the isDisabled style to preset a value that cannot be changed.

Actions	Description
onChange	The action is triggered when the value in the slider is changed. Use IntelliSense (ctrl+space) to see the list of available actions.

State Configuration	Key	Notes
=@ctx.component.state.	value	State is the variable of the component.

Considerations

• The slider supports gesture-based interaction by dragging the thumb control left or right.

• The selected value must stay within the configured minimum and maximum range.

• Use the step property to control how precisely users can select values.

• The component supports haptic feedback when values change.

• The display value overlay is useful when the current value needs to remain visible while dragging.

Examples and code snippets

Basic slider

Slider with initial value

Basic example of a slider configured with a numeric range from 0 to 1000. The selected value is shown as a formatted currency amount in the value overlay.

Examples:

See the full example in GitHub.

slider-basic.jigx

title: Revenue reporting
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1711915482570-a7714a3a4660?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  # Basic slider example.
  # The selected slider value is stored in component state:
  #   =@ctx.components.slider7.state.value
  - type: component.slider
    instanceId: slider7
    options:
      isHidden: false
      # Preset the initial slider position.
      initialValue: ="10"
      label: Earnings per week
      # Define the range limits.
      minimum: 0
      maximum: 1000
      # Allow selection in steps of 1.
      step: 1
      # Display the selected value above the thumb.
      displayValue:
        format:
          numberStyle: currency
          currency: EUR
        isHidden: =false
        isSubtle: =false
  - type: component.choice-field
    instanceId: budget-items
    options:
      label: What is included in your budget?
      data: =@ctx.datasources.budget
      item:
        type: component.choice-field-item
        options:
          title: =@ctx.current.item.title
          value: =@ctx.current.item.value

datasource

Slider in a form

In this example, the slider is used in a form to capture budget values. The display values are formatted as currency so the selected amount is easy to read while dragging. Each slider is configured with an initialvalue.

Examples:

See the full example in GitHub.

Multiple sliders in a form

slider-form.jigx

title: Campaign Budget
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&auto=format&fit=crop&q=60

children:
  - type: component.form
    instanceId: budget-form
    options:
      children:
        - type: component.slider
          instanceId: budget
          options:
            label: Select monthly budget
            minimum: 0
            maximum: 1000
            step: 10
            initialValue: 250
            displayValue:
              format:
                numberStyle: currency
                currency: EUR
              isHidden: false
              isSubtle: false
        - type: component.slider
          instanceId: video-budget
          options:
            label: Select video budget
            minimum: 0
            maximum: 1000
            step: 10
            initialValue: 500
            displayValue:
              format:
                numberStyle: currency
                currency: EUR
              isHidden: false
              isSubtle: false
            color: color3
        - type: component.slider
          instanceId: copywrite-budget
          options:
            label: Select copywrite budget
            minimum: 0
            maximum: 1000
            step: 10
            initialValue: 100
            displayValue:
              format:
                numberStyle: currency
                currency: EUR
              isHidden: false
              isSubtle: false
            color: color12
        - type: component.slider
          instanceId: photos-budget
          options:
            label: Select photos budget
            minimum: 0
            maximum: 1000
            step: 10
            initialValue: 30
            displayValue:
              format:
                numberStyle: currency
                currency: EUR
              isHidden: false
              isSubtle: false
            color: color4

Slider with conditional color

This example uses color conditions to visually indicate low and high temperature values on the slider. The value is written to the entity field. Examples:

See the full example in GitHub.

Slider with conditional colors

slider-color.jigx

title: Temperature Threshold
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1617713964860-a6ffc37721a1?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.slider
    instanceId: threshold
    options:
      label: Set threshold
      minimum: 0
      maximum: 100
      step: 5
      initialValue: 50
      color:
        - when: =@ctx.component.state.value < 30
          color: negative
        - when: =@ctx.component.state.value >= 30 and @ctx.component.state.value < 70
          color: warning
        - when: =@ctx.component.state.value >= 70
          color: positive
      displayValue:
        isHidden: false
        isSubtle: false
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Today's temperature threshold
            value: =@ctx.components.threshold.state.value