Slider Widget v7
- status : complete
- version : 7.x
The slider widget as a real-effort task (type=volume).
The Slider widget creates a customizable slider.
- mainText: a text to be displayed above the slider.
- hint: an extra informative text, after the main text.
- type: the type of slider: "flat", "volume" (default).
- min: the minimum (left-most) value of the slider. Default: 0.
- max: the maximum (tight-most) value of the slider. Default: 100.
- initialValue: the initial position of the slider, or "random" for a random position. Default: 50.
- correctValue: if set, this value is used to determined whether the final position of the slider is correct. Default: null
- displayValue: if TRUE, the current numeric value of the slider is displayed. Default: TRUE.
- displayNoChange: if TRUE, a checkbox for "no change" is added; when pressed the slider is reset to the initial value. Default: TRUE.
- required: if TRUE, it is marked as a required choice.
- onmove: a callback function executed at every move. See usecase for details.
- className: the className of the widget (string or array), or false to have none.
- required: If TRUE, slider movement is required, and the correct value ( if set) must match the current value.
- currentValue: Formats the display of the current value. Default:
function(widget, value) { return 'Value: ' + value; }- nochange: The label for the noChange checkbox. Default: 'No change'.
{ value: 69, // the percentage (0-100) of the movement from min to max noChange: true, initialValue: 10, isCorrect: true, // if correctValue is set value must match it totalMove: 245, // the amount of moves in absolute value, time: 3000 // since beginning of step. }var root = document.body; var slider = node.widgets.append('Slider', root, { id: 'myslider', initialValue: 25, correctValue 89, displayValue: false, mainText: 'Move the slider to position 89', hint: 'Be precise!', required: true, onmove: function(value, diff) { console.log('Slider moved to ' + value + ' from ' + (value - diff)); } }); // Replacing the default texts: numeric value is replaced with a label. var slider2 = node.widgets.append('Slider', root, { id: 'myslider2', min: 1, max 7, mainText: 'How do you feel?', texts: { currentValue: function(widget, value) { let mood = [ 'Terrible!', 'Bad', 'Could be better', 'Normal', 'Not bad', 'Good', 'Great!' ]; return mood[(value-1)]; } } });