Slider

Published on February 17, 2021, updated on June 01, 2021

Element: <ins-input-slider>

Defines an input range field.

Complete Example

Code Snippet

<ins-input-slider
  position="right"
  label="Range"
  min="0"
  max="100"
  step="10"
  value="50"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input-slider>

Default State

Code Snippet

<ins-input-slider></ins-input-slider>

Error State

Code Snippet

<ins-input-slider
  label="Error"
  max="100"
  has-error
  error-message="This is a required field">
</ins-input-slider>

Disabled State

Code Snippet

<ins-input-slider
  label="Disabled"
  disabled
  max="100">
</ins-input-slider>

No Label State

Code Snippet

<ins-input-slider
  max="100">
</ins-input-slider>

Top Position

Code Snippet

<ins-input-slider
  max="100"
  label="Top"
  position="top">
</ins-input-slider>

Left Position

Code Snippet

<ins-input-slider
  max="100"
  label="Left"
  position="left">
</ins-input-slider>

Bottom Position

Code Snippet

<ins-input-slider
  max="100"
  label="Bottom"
  position="bottom">
</ins-input-slider>

Slider Only State

Code Snippet

<ins-input-slider
  max="100"
  slider-only>
</ins-input-slider>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	""	-	Label shown for the field
name	string	""	-	Defines the field name
value	number	min value	-	Defines the field value
min	number	0	-	Defines the field minimum value
max	number	-	Required Attribute	Defines the field maximum value
step	number	-	-	Defines the step of the range
disabled	boolean	false	true, false	Disables the field
position	string	false	top, bottom, left or right	Defines the position of the label and value field
slider-only	boolean	false	true, false	Defines if the field should only render the slider
has-error	boolean	false	true, false	Defines if the field is invalid / error
error-message	string	""	-	Message shown when field has an error
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content

Events

EVENT	OBJECT	DESCRIPTION
insSlide	mouse and keyboard events	Emits when slider slides or when the value field has changed
insSlideStart	mouse and keyboard events	Emits when slider slide started
insSlideEnd	mouse and keyboard events	Emits when slider slide ended
insValueChange	value	Emits event when the value is changed

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.