Slider - Documentation

Usage (signatures)

board.create('slider', [start, end, range]);

The first two arrays give the start and the end positions of the slider line on the board. The third array gives range of the slider: the first resp. the third component of the array are the start and the end of the range. The second component of the array determines the initial value of the slider.

Parameters

Name	Type	Description
`start`	Array	`[x, y]`
`end`	Array	`[x, y]`
`range`	Array	`[start, initial, end]`

Examples

Slider with values between 1 and 10, initial position is 5

var s = board.create('slider', [[1, 2], [3, 2], [1, 5, 10]]);

Slider taking integer values between 1 and 5. Initial value is 3

var s = board.create('slider', [[1, 3], [3, 1], [0, 3, 5]], {
    snapWidth: 1,
    minTicksDistance: 60,
    drawLabels: false
});

Draggable slider

    var s1 = board.create('slider', [[-3, 1], [2, 1],[-10, 1, 10]], {
        visible: true,
        snapWidth: 2,
        point1: {fixed: false},
        point2: {fixed: false},
        baseline: {fixed: false, needsRegularUpdate: true}
    });

Set the slider value by clicking on the base line: attribute 'moveOnUp'

    var s1 = board.create('slider', [[-3,1], [2,1],[-10,1,10]], {
        snapWidth: 2,
        moveOnUp: true // default value
    });

Set colors

var sl = board.create('slider', [[-3, 1], [1, 1], [-10, 1, 10]], {

  baseline: { strokeColor: 'blue'},
  highline: { strokeColor: 'red'},
  fillColor: 'yellow',
  label: {fontSize: 24, strokeColor: 'orange'},
  name: 'xyz', // Not shown, if suffixLabel is set
  suffixLabel: 'x = ',
  postLabel: ' u'

});

Create a "frozen" slider

var sli = board.create('slider', [[-4, 4], [-1.5, 4], [-10, 1, 10]], {
    name:'a',
    frozen: true
});

Use MathJax for slider label (don't forget to load MathJax)

var s = board.create('slider', [[-3, 2], [2, 2], [-10, 1, 10]], {
    name: 'A^{(2)}',
    suffixLabel: '\\(A^{(2)} = ',
    unitLabel: ' \\;km/h ',
    postLabel: '\\)',
    label: {useMathJax: true}
});

Attributes

Own

baseline

Description: Attributes for the base line of the slider.
Type: Line
Source: options.js, line 9140

digits

Description: The number of digits of the slider value displayed in the optional text.
Type: Number
Default Value: 2
Source: options.js, line 8959

highline

Description: Attributes for the highlighting line of the slider.
Type: Line
Source: options.js, line 9196

intl

Description

Internationalization support for slider labels.

Type

object

Default Value

{
   enabled: 'inherit',
   options: {}
}

See

Example

var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], {
    name: 'α',
    snapWidth: 1,
    intl: {
        enabled: true,
        options: {
            style: 'unit',
            unit: 'degree',
        }
    }
});

Source

options.js, line 8970

label

Description: Attributes for the slider label.
Type: Label
Source: options.js, line 9214

moveOnUp

Description: If true, 'up' events on the baseline will trigger slider moves.
Type: Boolean
Default Value: true
Source: options.js, line 9227

point1

Description: Attributes for first (left) helper point defining the slider position.
Type: Point
Source: options.js, line 9106

point2

Description: Attributes for second (right) helper point defining the slider position.
Type: Point
Source: options.js, line 9123

postLabel

Description

If not null, this is appended to the value and to unitLabel in the slider label. Possible types: string, number or function.

Type

String

Default Value

null

See

Source

options.js, line 9073

precision

Description

The precision of the slider value displayed in the optional text. Replaced by the attribute "digits".

Type

Number

Deprecated

Yes

Default Value

See

Slider#digits

Source

options.js, line 8945

size

Description

Size of slider point.

Type

Number

Default Value

See

Point#size

Source

options.js, line 9095

snapValueDistance

Description

If the difference between the slider value and one of the elements of snapValues is less than this number (in user coordinate units), the slider will snap to that value.

Type

Number

Default Value

0.0

See

Slider#snapValues

Source

options.js, line 8932

snapValues

Description

List of values to snap to. If the glider is within snapValueDistance (in user coordinate units) of one of these points, then the glider snaps to that point.

Type

Array

Default Value

empty

See

Slider#snapValueDistance

Example

var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], {
     name: 'n',
     snapWidth: 1,
     snapValues: [1, 22, 77, 100],
     snapValueDistance: 5
 });

 var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], {
     name: 'k',
     snapWidth: 0.1,
     snapValues: [-3, -1, 1, 3],
     snapValueDistance: 0.4
 });

Source

options.js, line 8879

snapWidth

Description: The slider only returns integer multiples of this value, e.g. for discrete values set this property to 1. For continuous results set this to -1.
Type: Number
Source: options.js, line 8868