Skip to content

Slider

Jump to bottom
Daniel Torren Peraire edited this page Jun 26, 2020 · 4 revisions

Range Slider

Simple range slider based on the html input tag, allows user to slide continuously through variables.

Usage

Image of slider functionality, showing buuble, ticks, sider value and buttons

This is an interactive element that the developer should implement wherever they want the user to learn something by testing out a variable over a range of value.

API Reference

Props

  • min - Number, default = 0.0 used to set the minimum value of the slider
  • max - Number, default = 100.0 used to set the maximum value of the slider
  • step - Number, default = 10.0 used to set the step size in the range of motion of the slider
  • init_val - Number, default = 50.0 used to set initial value of the slider
  • disabled - Boolean, default = false used to disable the slider so that value can't be changed
  • sliderValue - Boolean, default = false used to display slider value adjacent to the slider
  • bubble - Boolean, default = false used to display slider value as a bubble above the slider thumb, which follows the thumb
  • sliderButtons - Boolean, default = false used to display buttons to increase or decrease the slider value by a fixed amount
  • buttonInput - Boolean, default = false used to display input to vary the sliderButton increase or decrease amount, applied to both equally
  • sliderTicks - Boolean, default = false used to display slider ticks at each step

Events

  • On slider change, event "sliderChanged" is emmited with load "value", which is the numerical value of the slider.

Examples

<template>
   <iv-slider max=200 bubble=true sliderTicks=true>
</template>

Clone this wiki locally