Skip to content

Slider

Jump to bottom
Daniel Torren Peraire edited this page Jul 16, 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
  • lineTick - Boolean, default = false used to display line slider ticks at each step
  • numTick - Boolean, default = true used to display value slider ticks at each step
  • playSlider - Boolean, default = false, differnet mode of slider where slider buttons move to and from the previous and next frame.
  • button_step_init - Number, default = 10.0 sets the value of the sliderButtons
  • tick_decimals - Number, default = 0 sets the number of decimal places for the numTick

Events

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

Data

  • id: null gives the unique id of the componant used to produce the ticks
  • value: this.init_val gives the current value of the slider
  • smallStep size of the smallest step available to the slider, this is compared to the step size desired by the user within the update_step method
  • tick_list: null the list of ticks required to show the step size, each tick is then passed into the respective numTick and lineTick sub-componants
  • tick_line_key:null unique key for the line ticks, set using this._uid
  • tick_num_key:null unique key for the num ticks, set using this._uid
  • value_marker_width: 25same as the width of the marker showing the value
  • thumb_width: 18 same as the width of the range slider thumb
  • minDiv - array of objects each with a width(minimum width at which this is triggered),ticks(max numebr of ticks at that width),step_size(step size calculated using the max and min values of the slider)
  • maxTicks - sets max number of ticks the user may have as to not overclog the slider display

Examples

<template>
   <iv-slider max=200 bubble=true>
</template>
Clone this wiki locally