[deutsch]

Slider

A KontrastSlider provides a numeric slider in combination with an input edit element that allows you to explicitly enter values. Moreover, a KontrastSlider can be used to interpolate values in a non-linear fashion (e.g. logarithmically) along the slider.

An example on how to use the KontrastSlider is given in the tutorial.

A minimal JavaScript snippet for creating a KontrastSlider is:

The necessary HTML code for the above JavaScript code is:

Below we show a minimal example with the following properties:

The width of the quantity and unit text is automatically chosen: Among all slider objects that share a common parent element the maximum width is used. This is shown below:

Interface

Properties

  • element: KontrastElement

    The HTML element to which the slider is attached. The HTML element should be empty (it should not contain other child-elements).

  • name: KontrastName

    The name of the slider. The name has to be unique within the HTML page the slider belongs to. The name must not be empty and must not contain a dot, colon, semicolon or a hash (#). The name defaults to sliderN, where N is a non-negative integer. We recommend you choose a meaningful name for each slider, so that it can be easily accessed via the development console or the Kontrast menu.

  • numberType: KontrastSelection (default value: 'float', possible values: 'float', 'integer')

    The 'integer' number type only allows to use integer numbers and the step size is always 1. In the 'float' number type all valid floating point numbers are accepted and the step size is automatically selected based on the minimum and maximum.

  • value: KontrastNumber (default value: 1)

    The value of the slider.

  • min: KontrastNumber (default value: 0)

    The minimum value of the slider (i.e. the value corresponding to the slider in its leftmost position).

  • max: KontrastNumber (default value: 10)

    The maximum value of the slider (i.e. the value corresponding to the slider in its rightmost position).

  • mapping: KontrastMapping (default value: 'linear', possible values: 'linear', 'date', 'degree', 'radianAsDegree', 'ln', 'log10', 'log2', 'positiveReciprocal')

    The mapping used to interpolate values along the slider. Note that the logarithmic mappings 'log10', 'ln', 'log2' are equivalent for the purpose of interpolating values along the slider.

    Example: Sliders with different mappings

  • quantity: KontrastString (default value: empty string)

    The quantity text, which is displayed in front of the slider (to its left). Typically it is a mathematical symbol to describe the quantity. The string is treated as HTML. For example, when using the katex library, you might use quantity: katex.renderToString('x').

  • unit: KontrastString (default value: empty string)

    The unit of the quantity. The string is treated as HTML and is displayed after the edit element.

  • disabled: KontrastBoolean (default value: false)

    When set to true, both the slider and the edit are disabled (blocked for user input).

    Example: Disabled slider

Events

A KontrastSlider object emits events that you can subscribe to as detailed in the event documentation.

  • numericInput, callback: function () { … }
    Fires whenever valid numeric input is entered by the user (either by using the slider or the edit).
  • focus, callback: function () { … }
    Fires whenever the edit element or the slider element is focused.
  • blur, callback: function () { … }
    Fires whenever the focus of either the edit or the slider element is lost.
  • startInput, callback: function () { … }
    Fires whenever the user starts changing the value with the slider element. This event does not fire when the user uses the edit element.
  • endInput, callback: function () { … }
    Fires whenever the user finishes changing the value with the slider element (for example by releasing the mouse button). This event does not fire when the user uses the edit element.

Examples