Skip to content

Slider. No guarantees are given that this works or keeps working.

License

Notifications You must be signed in to change notification settings

FlockOfBirds/slider

 
 

Repository files navigation

Build Status Dependency Status Dev Dependency Status codecov

Slider

Change a number value using a slider

Features

  • 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

Dependencies

Mendix 7.14

Demo project

https://slider.mxapps.io/

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

Usage

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 https://github.com/mendixlabs/slider/issues

Development

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

To contribute, fork and clone.

> git clone https://github.com/mendixlabs/slider.git

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 https://github.com/mendixlabs/slider/releases/latest 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

About

Slider. No guarantees are given that this works or keeps working.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 71.7%
  • JavaScript 22.3%
  • CSS 6.0%