Scale Slider

It will display the given scale as slider.
It is single select.
At least 3 values should be there.

Features/ Functionality

It will repeat the items in horizontal direction.
Change callback functionality is also there.
If options.showIcon = true, it will display the icons.
Component is container responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).
Touchscreen friendly.

Basic Usage

Dependencies

jquery
font awesome
rangeslider.js
shared styles
shared scripts

HTML Structure

<require from="{user_path}/scale_sliders/scale_slider"></require>
<cst-scale-slider items.bind="{items}" input-id.bind="{inputId}" readable-item.bind="{readableItem}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-change-callback.bind="{evtChangeCallback}"></cst-scale-slider>

Bindable Properties

Property	Data Type	Required	Description
items	array	Yes	Data to be passed to component.
inputId	string/int	No	Selected value's id will be set in inputId. It is two way communication property. Once the data sent will be set, then whatever selected value changes page can get it.(Data type as per optins.propId)
readableItem	object	No	To get selected value in this object. Inisially bind this object as empty.
options	object	No	Basic component options
otherInfo	any	No	Extra info to be passed on event
extDisabled	boolean	No	Disables any functionality on component.
evtChangeCallback	method	No	Method to be called on change event.

Structure of bindable properties

items

items = [
    {
        id: '',                        
        label: '',
        icon: ''                
    },...
]

readableItem

readableItem = {}               // If we want selected value in this object, pass it as empty

options

options = {
    propId:'',              // This is the key of items object, which is the id.
    propLabel: '',          // This is the key of items object, which we want to display label. If propLabel is null, It will show 1 to items.length
    propIcon: '',           // This is the key of items object, which is the icon.
    pageLabel: {},          // Override page labels
    showIcon: false         // If true, display given emoji icons. If emoji icons are not given, it will take default emoji icons.
}

evtChangeCallback

evtChangeCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    otherInfo: otherInfo,
    value: item
}

For this event is null

CSS Overriding

Following classes are given to override CSS:
- 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

Note

While giving the classes in page, give them in nested structure.

Rules

Component measurements

Image of measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>
  <require from="./shared/core_comp/scale_sliders/scale_slider"></require>
  <div>
    <cst-scale-slider items.bind="items" input-id.bind="inputId" readable-item.bind="readableItem" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-change-callback.bind="evtChangeCallback"></cst-scale-slider>
  </div>
</template>

class MyCls{
    constructor(){
        this.otherInfo = {
            qId : '1'
        }
        this.items = [
                {
                    key: 1,
                    value: 'Very Poor',
                    icon: 'EMOJI_SAD'
                },
                {
                    key: 2,
                    value: 'Poor',
                    icon: 'EMOJI_SAD'  
                },
                {
                    key: 3,
                    value: 'Good',
                    icon: 'EMOJI_Normal'
                },
                {   
                    key: 4,
                    value: 'Very Good,
                    icon: 'EMOJI_HAPPY'
                },
                {   
                    key: 5,
                    value: 'Excellent',
                    icon: 'EMOJI_HAPPY'
                } 
        ];
        this.inputId = {};
        this.options = {
            propLabel: 'value',          // Display value
            propIcon: 'icon'             // Title value
        };
        this.disabled = false;
        this.readableItem = {};
    }

    evtChangeCallback(_event,_info){
        console.log(_event);
        console.log(_info);
    }
}
export { MyCls }