Category: Widgets
Subcategory: Input widgets


Change a number value using a slider.


Demo url

Build Status Dependency Status Dev Dependency Status codecov


Change a number value using a slider


  • Adjust the slider value
  • Execute a microflow when a slider value is changed or clicked
  • Show a tooltip on hover
  • Render slider with different bootstrap colors


Mendix 7.14

Demo project

Basic configuration

  • Value attribute - The selected value on the slider.
  • Range minimum attribute - The attribute that contains the minimum slider value, if not provided, 'Default minimum value' will be used.
  • Range maximum attribute - The attribute that contains the maximum slider value, if not provided, 'Default maximum value' will be used.

Sample slider datasource configuration


The slider allows a user to set a value between two bounds (minimum value and maximum value) However, if there are two values that need to be set between two bounds, download the Range slider from appstore or from github instead.

Sample slider

From the modeler place the widget in the context of an object that has attributes for maximum value, minimum value and value

The maximum and minimum values determine the range within which the slider value can be adjusted.

The step value determines the next point to shift to when sliding (interval between to points or numbers).

Sample step value

Note when choosing the step value, the difference between the maximum value and the minimum value should be divisible by 2. i.e.

(maximumValue - minimumValue) % 2 = 0

Issues, suggestions and feature requests

We are actively maintaining this widget, please report any issues or suggestions for improvement at


Prerequisite: Install git, node package manager, webpack CLI, grunt CLI, Karma CLI

To contribute, fork and clone.

> git clone

The code is in typescript. Use a typescript IDE of your choice, like Visual Studio Code or WebStorm.

To set up the development environment, run:

> npm install

Create a folder named dist in the project root.

Create a Mendix test project in the dist folder and rename its root folder to dist/MxTestProject. Or get the test project from Changes to the widget code shall be automatically pushed to this test project.

To automatically compile, bundle and push code changes to the running test project, run:

> grunt

To run the project unit tests with code coverage, results can be found at dist/testresults/coverage/index.html, run:

> npm test

or run the test continuously during development:

> karma start


Version: 1.3.2
Framework Version: 7.13.1
Release Notes: Improvements: - Remove strange line break from invalid step size alert message - Remove usage of a deprecated mx client api endpoint
Version: 1.3.1
Framework Version: 7.13.1
Release Notes: - On change events are now only triggered when the value has change and no longer double trigger on loose focus - The value is no longer updated when the value, upper bound or lower bound is invalid. - The preview is now using the `Default minimum` and `Default maximum value`
Version: 1.3.0
Framework Version: 7.13.1
Release Notes: The minimum and maximum value can now be set in the widget as a alternative or as fallback from the attribute value.
Version: 1.2.1
Framework Version: 7.13.1
Release Notes: Fix rounding of validation of the settings (resolves GitHub issue #13)
Version: 1.2.0
Framework Version: 7.13.1
Release Notes: New feature - Nanoflow can now be used on the change event - The slider can be set tho read only with the option `Editable` set to `never` Fixes: - Something with a t tooltip issue - Validation for max and min value, could be the same value