@cas-smartdesign/lit-slider

A slider element based on lit-element with SmartDesign look & feel.

Requirements

The main entry point requires ES6 & support for Custom Elements v1

Attributes

The following attributes are supported: min, max, value, step, editable, clampValue, inputSuffix, disabled & hidden

Properties

The following properties are available:

• value number (default=0)
  • reflects the corresponding attribute
• min number (default=0)
  • reflects the corresponding attribute
• max number (default=1)
  • reflects the corresponding attribute
• step number (default=undefined)
  • Reflects the corresponding attribute, if undefined then the (max - min) / 100 value is used.
  • Valid values are defined based on the min value and increments of the step value, up to the max value.
  • If difference between min and max is bigger than 1, only steps larger than 1 are supported on user interactions done directly on the slider part.
• colors Map<number, string> (default=empty)
  • A relative-value -> color mapping which can be used to configure a color blending mode for the slider. For further details check the examples.
• editable boolean (default=false)
  • If set to true then a value lit-input is shown next to the track container.
• clampValue boolean (default=false)
  • If set to true, the value is clamped according to the limits of min and max.
• inputSuffix string (default=undefined)
  • A suffix text can be defined for the value field which is turned on via editable flag.
• disabled boolean (default=false)
  • reflects the corresponding attribute
• decimalSeparator string (default=".")
  • Used to convert numbers edited via the above mentioned input field.

Custom events

• value-change

  • This event is dispatched when the value has been changed because of a user interaction

• immediate-value-change

  • This event is dispatched continously during user interaction

Validation

The element could show validation messages via an sd-field-validation-message element which can be configured with the following attributes & properties which are all delegated to that:

• validationMessage string (default=undefined)
• validationIconSrc string (default=undefined)
• validationLevel ValidationLevel (warn, suggest & error) (default=undefined)

Other

It supports touch devices, uses aria attributes and includes the default keydown event handling such as arrow- left, top, right, bottom.