Scale Slider Work flow

Bindable Properties

1. items
2. inputId
3. readableItem
4. options
5. otherInfo
6. extDisabled
7. evtChangeCallback

Overview

• It will display the given scale as slider.
• If options.showIcon = true, it will display the icons.
• It is single select.
• It will repeat the items in horizontal direction.
• Click callback functionality is also there.
• Component is responsive.
• It is cross browser compatible. (IE11, Edge, Firefox, chrome)
• Touchscreen friendly

Defaults

• !items.length, label will display = 'No data to display!'
• items.length < 3, label will dusplau = 'Value is no sufficient. At least 3 values should be there!'
• !options, options = empty object.
• If outer container size is < 480, label will not visible. only selected label will display
• If !options.propLabel:
  • If outer container size is < 480 : Display propId
  • If outer container size is > 480 : Lable will visible from 1 to items.length
• If options.showIcon = true and propIcon is not given, default icon will be display

Breakdown

• In this we are using rangeslider.js
• As per given css override class, slider design will change.
• If css override class is not there, default css will apply.
• On page load slider value is as per inputId.
• readableItem is the selected item's value.
• If disabled is true, change functionality will not work.
• On change, slider value will be change.
• On css override
  • cst-scale-slider-element-override // Class will apply on range slider
  • cst-scale-slider-horizontal-override // Class will apply on range slider for horizontal direction
  • cst-scale-slider-fill-override // Class will apply on filled range slider section
  • cst-scale-slider-handle-override // Class will apply on range slider handle

Horizontal

• Slider will be devided in item's length - 1 part.
• Width of one section is 100% / item's length - 1.
• At last manully add one div to display last line.
• Title max width = 150px;
• Last title should be absolute.
• First title should be text left.
• Second title should be text right.
• Remaining all title should be in center.
• Left and right margin should be half of slider handle width.
• If we pass readableItem as blank object, we will get selected object in readableItem.