---
sourceDocument: Australia Mobile Configuration and Navigation
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/mobile

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Mobile Configuration and Navigation

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Development, Data and Analytics


---

# Configure a decorative slider

# Configure a decorative slider {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read

Create a colored slider option for a number input on your input form screen. Decorative sliders contain sections that can be associated with a specific color and label to aid visual representation. These labels are
translatable.

## Before you begin

Role required: admin

This task assumes that you already have the basis of an input form screen configured before adding the slider option for a number input. For more information, see [Configure an input form screen](https://servicenow-prod.fluidtopics.net/PVSI3Faa8_DKNk1SxKRsJQ "Configure an input parameter so that your users can see a list of records from their mobile app. To access a record from the list, a user just has to tap the record name.").

## About this task

Creating a slider render type is more involved than for the other render types: integer, line, percentage. The configuration involves the creation of multiple input attributes. Required attributes are Min. Max, and StepSize.
For a complete list of input attributes you can use with a number slider, see [Number render types and compatible input attributes](https://servicenow-prod.fluidtopics.net/9b3xH_TgZ28rAznNEaTUtQ "Use the tables to determine which input attributes are compatible with different number render types. The available number render types are integer, line, percentage, and slider.").

You must add an additional input attribute called Decoration, which gives the slider a colorful and segmented appearance. A decorative slider has between two through eight sections, where you define a start value and end
value. The start value must match the end value of the previous entry. In addition, you must select a color for each section. A JSON example script is provided, which contains four defined sections. This script is
editable.  
There's an option when configuring a decorative slider type to add translated values, so that users can view the slider in their selected language. For more information, see [Configure translated values for decorative slider](https://servicenow-prod.fluidtopics.net/adAisv4jOQ9b3utXPuFA~w "Add translated values to your decorative slider.").  

## Procedure

1. Navigate to AllSystem MobileMobile App Builder.  
   The Mobile App Builder opens in a new browser tab and displays the application scope selection screen.
2. Search for the application scope you're working in and then select the name of the application scope.  
   The Mobile App Builder categories home screen displays.
3. Select the  Screens  category and then select the input form screen for which you want to configure inputs.
4. Scroll down to the Inputs section of the form and then either select an input to modify or select  New  to create an input.  
   The Input form appears. For more information about configuring inputs, see [Configure input form screen inputs](https://servicenow-prod.fluidtopics.net/apSm79jzLJCtKl4X~5n3qw "Configure the input fields that your users use to enter information. You can use screen inputs to determine the input type, question text, placeholder values, and other attributes.").
5. In the Input type field within the Settings area, select Number.
6. Select New in the Inputs attributes area.
7. Select RenderType from the Name field, select Slider from the Value field, then select Save.
8. Create and save the input attributes for Min, Max, and StepSize and define their values.  
   For configuration details, see [Configure a slider option for a number input](https://servicenow-prod.fluidtopics.net/75Xg~17vF5thDbZINM6slg "Create a slider option for a number input on your input form screen. Sliders help users visualize the input range and reduce errors by limiting choices to defined minimum and maximum values.").  
   Note:  
   RenderType, Min, Max, and StepSize are required input attributes for sliders. Other input attributes are optional. For a complete list of input attributes, see the Number inputs section within the topic [Input form screen attributes for inputs](https://servicenow-prod.fluidtopics.net/EKaX~e6Ccz9_7N5~4dKDWw "Different types of inputs are available for use in input form screens, and you can use different attributes to configure the inputs.").
9. Select New in the Inputs attributes area.
10. Select Decoration from the Name field.  
    A JSON script displays with a default script, which you can edit as needed.

          "Range": [ 

            { 
              "Label": "Critically Low", 
              "StartValue": 0, 
              "EndValue": 10, 
              "Color": "#000000" 
            }, 
            { 
              "Label": "Low", 
              "StartValue": 10, 
              "EndValue": 50, 
              "Color": "Slider-2" 
            }, 
            { 
              "Label": "Medium", 
              "StartValue": 50, 
              "EndValue": 75, 
              "Color": "Slider-1" 
            }, 
            { 
              "Label": "High", 
              "StartValue": 75, 
              "EndValue": 100, 
              "Color": "Slider-0" 
            } 
          ] 
        } 

    This example script lists four sections contained within a slider. A decorative slider can contain between two and eight sections. Each segment has the following values:
    * Label: A name attributed to each section. In the example, they are: Critically low, Low, Medium, and High. The names are editable.  
      Note:  
      The names contained within the label value can be translated. To do this, double curly braces must be added to the `Label` value. For example, `Medium` becomes `{{Medium}}`. For more information, see [Configure translated values for decorative slider](https://servicenow-prod.fluidtopics.net/adAisv4jOQ9b3utXPuFA~w "Add translated values to your decorative slider.").
    * StartValue and EndValue: These can be any value. Usually these values are divisible by the number of sections. The StartValue of one section must correspond to the EndValue of the previous section.
    * Color: The color value can either be a HEX code or the label of a variable from your current mobile theme. The JSON script provides the following default colors:
      * `#000000` corresponds to green.
      * `Slider-1` corresponds to yellow.
      * `Slider-2` corresponds to orange.
      * `Slider-3` corresponds to red.

      {#decorative-slider__ul_zsx_5kr_bgc} For a complete list of variables, navigate to Allsys_ux_style.list and search for Mobile Colors Default.
    {#decorative-slider__ul_dw2_xjr_bgc}
11. Select Save.
{#decorative-slider__steps_dxp_pjr_bgc}

## What to do next

You can add translated text to each of the text values displays on your slider. For more information, see [Configure translated values for decorative slider](https://servicenow-prod.fluidtopics.net/adAisv4jOQ9b3utXPuFA~w "Add translated values to your decorative slider.").

*[\>]: and then