Slider Widget

Use this widget on the form to increment / decrement the value represented.

Last published at: June 3rd, 2024


Use this range slider on the form to increment/decrement the represented value in the parent form, subform, table, bootstrap grid, subform grid view, and tab form controls. The minimum value and maximum values are configurable, with the minimum value being zero (0). The slider values can be configured during the form design and run time using setFormFieldValues, getFormFieldValues process steps, and event Javascript. 


  • ID/Name - Name of the widget generated by FlowWright (read-only field)
  • Min Value - Provide minimum non-negative value (default is 0)
  • Max Value - Provide maximum value
  • Set Value - Provide value in between as preset 
  • Label Text - Provide a label text 
  • Label Position - Select a position from the dropdown
  • Slider Color - Select colors from a predefined palette or HEX value 
  • Hide - Select the checkbox to Hide (tick mark)
  • Read Only - Select the checkbox to Read-Only (tick mark)
  • Show Minimum / Maximum Value - Select the checkbox to display
  • Save - Save the input values
  • Delete - Remove this form widget from the designer page 
  • Close - Close the input popup window






Let’s build and execute the RangeWidgetDef example.  

  • Create a new form definition called “RangeWidgetDef.
  • Select the Open Designer checkbox and click the “Create” button
  • Drag a Range Slider and Submit widget to the canvas
  • Double-click on the widget to configure the inputs, as shown in the below graphic. 


  • Save the change. Navigate to Run - Form Instances - Create and edit a form instance for the above form definition.
  • The form is displayed to the user so that the user can select the value by sliding and submitting.