Slider

• Material Design Spec
• Develop
• Demo

• Graphics Link

Definition

<cst-slider>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-item/>

<sub-item/>

<sub-lr-icon/>

<sub-lr-label/>

<sub-options />

<sub-help-icon/>

<sub-feature-flag/>

</cst-slider>

OR

<cst-element name="slider" schema="" schema-prop="" value=""/>

Example

<cst-slider id="" value="">

<sub-theme name="" clr-var1="" clr-var2=""/>

<sub-font name="" font-var1="" font-var2=""/>

<sub-style name="" width="" height=""/>

<sub-access can-view="" can-modify=""/>

<sub-item text="" id="" icon-name="" lr-icons=""/>

<sub-item text="" id="" icon-name="" lr-icons=""/>

<sub-lr-icon name="" position="" title="" link=""/>

<sub-lr-icon name="" position="" title="" link=""/>

<sub-lr-label text="10" position="left"/>

<sub-lr-label text="60" position="right"/>

<sub-options items-prop="" item-text-prop="" item-id-prop=""

item-icon-name-prop="" lr-icons-prop="" />

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag allow-range="" allow-icon="" is-display-label="">

</cst-slider>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
value	string/object type	If allow-range is false, value = string type else value = object type
required	boolean type	Specifies if field must be required.
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
max	number type	Specifies the maximum value allowed.
min	number type	Specifies the minimum value allowed.
step	number type	Specifies the legal number intervals.
class	cst-mat-slider (default if material design) cst-mat-slider-track-container cst-mat-slider-track cst-mat-slider-thumb-container cst-mat-slider-thumb cst-mat-slider-focus-ring cst-mat-slider-marker cst-mat-slider-marker-container cst-mat-slider-discrete	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-lr-icons	array type	Specifies icons to be displayed.
sub-lr-labels	array type	Specifies fixed text to be displayed.
sub-options	object type	Specifies the options of the component.
sub-help-icon	object type	Specifies help icon to be displayed.
sub-feature-flag	object	Specifies what features to enable/disable.
other	any type	Any other info.
schema	object type	Specifies JSON schema.
schema-prop	string type	Specifies property to be used to pick schema.

Sub element attributes

sub-theme

Property	Value	Description
name	primary(default)/secondary/custom	Name of the theme.
clr-label	string type	If custom then specific/ named color variables

sub-font

Property	Value	Description
name	roboto (default)/custom	Name of the font
font-text	string type	If custom then specific/ named font variables.
font-label	string type
font-error	string type

sub-style

Property	Value	Description
name	material/skeuomorphic	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-lr-icons

(a.k.a left right icons)

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click of icon.

sub-lr-labels

(a.k.a left right labels)

Property	Value	Description
text	string type	Label text.
position	left/right	Position of the label.

sub-options

Property	Value	Description
items-prop	string type	Property of item array
item-id-prop	string type	Property of item's id.
item-text-prop	string type	Property of item's text, display as label.
item-icon-prop	string type	Property of item's icon which will displays at top center of the component
item-lr-icons-prop	string type	Displays the icons near to the item text

sub-help-icon

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click.

sub-feature-flag

Property	Value	Description
allow-range	boolean type	Specifies to select lower range also
allow-icon	boolean type	Specifies to display icon as per selected value if allow-range = false
is-display-label	boolean type	Specifies to hide/show item label

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["feedbackId"], //= required

properties: {

feedbackId: {

type: "string",

title:"Rate Us",//= label

cstAttr: {

raw:{ //loop & add to element

disabled : true,

max: 10,

min: 0,

step: 1,

class:'outline cst-class1'

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

},

subLrIcons:[{

name:'',

position:'',

title:''

}],

subLrLabels: [{

text: '',

position: ''

}],

subOptions:{

itemsProp: '',

itemIdProp: '',

itemTextProp: '',

itemIconProp: '', // Display icon at top center

itemLrIconsProp: '' // Display icon near to item text

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

allowRange: '',

allowIcon: '',

isDisplayLabel: ''

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

itemsSource: '', //to check in page object

itemsSourceAPI: '',

}

}

}

}

let schemaProp = 'feedbackId';

let value = '200';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

let data = [

{

text: '', // label of the component

items: [

{

id: '',

text: '',

disabled: '',// To disabled particular item

iconName: '',

lrIcons:[ // Left Right icon array

{

name:'',

position:'',

title:''

}

]

}

]

}

]

Exact schema

let schema = {

type: "number",

title: "Region", //= label

cstAttr: {

}

}

let schemaProp = '';

let value = '200';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.feedbackId';

let value = '200';

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Continuous sliders

• height = 2px
• thumb-height and width = 12px

Discrete sliders

• height = 2px
• thumb-height and width = 12px
• section width = 2px

Image with Icon and Label

Events

Attribute	Description
onchange	Fires when the element's value changes.
onend	Fires when the item selects.
oninvalid	Script to be run when an element is invalid.
onreset	Fires when reset button is clicked.
onvalidate	Custom validate hook, must return error message else considered valid; will be called onchange.

Event Method signature

method(parentRefObj, evtObj, elm, others)

Parameters description

Parameter	Value	Description
parentRefObj	parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext }	Parent Context references
evtObj	object	Event object
elm	object	Element value
others	any	Other value

Features

• Displays slider to get or set item.
• Can change the value
• Default min limit is first value of the component.
• If allowRange is true, user can set lower and upper limit
• If allowIcon is true, user can see the icon as per value(if passed, display that icon or lest default icons will be display)