SliderBlock

The iv-slider-block is a wrapper for the iv-slider component. It takes the props of iv-slider and creates a stackable block which contains the slider.

To include this component, include the <iv-slider-block> in your html and costumize the slider by passing different values to the props. Details are shown in the example below.

API

Props

Name: bubble
Type: Boolean
Default: true
Description: Display slider value as a bubble above the slider thumb.

Name: playSlider
Type: Boolean
Default: false
Description: Differnet mode of slider where slider buttons move to and from the previous and next frame.

Name: min
Type: Number
Default: 0.0
Description: Sets the minimum value of the slider.

Name: max
Type: Number
Default: 100.0
Description: Sets the maximum value of the slider.

Name: step
Type: Number
Default: 10
Description: Sets the step size of the slider.

Name: init_val
Type: Number
Default: 50.0
Description: Sets the initial value of the slider thumb.

Name: tick_decimals
Type: Number
Default: 0
Description: Sets the number of decimal places for the display value of the slider tick at each step.

Name: colorBlock
Type: String
Default: "green"
Required: true
Description: Sets the theme color for the entire block. Currently there are 9 options to choose from: navy, blue, teel, green, orange, tangerian, yellow, purple and berry.

Name: unit
Type: String
Default: "kg"
Required: true
Description: Sets the unit of the slider.

Name: sliderName
Type: String
Default: "Slider Name"
Required: true
Description: Sets the name for the slider.

Name:guidanceIdentifier
Type: String
Description: Sets a unique id that can be read by the guidance identifdier and return the corresponding guidance page.

Name:helpButtonActivated
Type: Boolean
Default; true
Description: Display the help button.

Usage

An example of using the slider block is shown below:

<template>
  <div id="app">
    <iv-title-bar />
    <iv-visualisation>
      <template #hotspots>
        <iv-pane position="left" format="push"/>
        <iv-pane position="right" format="push"/>

        <iv-toggle-hotspot id="iv-toggle-hotspot-bottom" position="bottom" title="BOTTOM">
          <iv-slider-block :colorBlock="green" :max="10" :min="0" :init_val="5" :sliderName="'slider test'" :unit="'test unit'" :step="1" 
          guidanceIdentifier="slider1"/> 
          <iv-slider-block :colorBlock="orange" :max="10" :min="0" :init_val="5" :sliderName="'slider test'" :unit="'test unit'" :step="1" 
          guidanceIdentifier="slider2"/>
        </iv-toggle-hotspot>

    
      </template> 
    </iv-visualisation>
    <iv-guidance-system :guidance_branches_input="guidance_branch_list" />
  </div>
</template>