smart intervals

SmartIntervals - a component to set names for value ranges.

Description

Let's say you are developing a software for testing and you need to display final test results depending on a percentage of correct answers like the following:

Let's say also, that a user wants to change interval borders and a number of intervals. If the user enters the data using a table you have to control that the highest value of one interval is equal to the lowest value of the next one, the whole range is covered by intervals, you need to create buttons and input fields, etc.

I have invented a component SmartIntervals to solve this problem.

The component consists of a ruler and input fields. To add a new interval you can click in any place on the ruler. A new point will appear, and a range of values will be splitted on two. A new input field will also appear below the ruler. You can drag the point left and right with a mouse. To delete the point drag it out of the ruler.

Usage

You need to include files si.js and si.css on your page. Add a HTML element div:

<div id="demo-si"></div>

Initialise a component passing its id as a parameter:

var s = new SmartIntervals('demo-si');

Result:

The component is initialised by default wuth the ruler with values from 0 to 100 and with step 10. If you need another values or you want to create a component with already existing points and interval names, pass a settings object as a second parameter. It can have the following values:

{ruler: {min: 0, 
         max: 100, 
         step: 10},
 points: [50, 70, 95],
 names: ['Bad', 'Average', 'Good', 'Excellent'],
 width: 500}

The description of properties is in the table below:

Example of the initialization:

var settings =
    {ruler: {min: 0, max: 100, step: 10},
     points: [50, 70, 95],
     names: ['Bad', 'Average', 'Good', 'Excellent'],
     width: 500};

var s = new SmartIntervals('demo-si', settings);

You can see the result of this code in the first screenshot above.