Slider

Sliders are an input type that allows the user to change a value across a range using a graphical slider. Our sliders are always composed with an input field inline, this both displays and controls the slider position.

Installation

Coming soon…

Examples

Input left


                                                        
                                                        
                                                            <co-slider input-left id=”range-slider” optional value=”10” min=”1” max=”100”>
                                                        <label slot=”label”>Slider label</label>
                                                        <p slot=”helper-text”>This is slider helper text</p>
                                                        </co-slider>

Input right


                                                        
                                                        
                                                            <co-slider input-right id=”range-slider” optional value=”10” min=”1” max=”100”>
                                                        <label slot=”label”>Slider label</label>
                                                        <p slot=”helper-text”>This is slider helper text</p>
                                                        </co-slider>

With slots


                                                        
                                                        
                                                            <co-slider input-left id=”range-slider” optional value=”10” min=”1” max=”100” invalid>
                                                        <label slot=”label”>Slider label</label>
                                                        <p slot=”helper-text”>This is slider helper text</p>
                                                        <p slot="validity-msg">Entered value has exceeded the maximum limit</p>
                                                        </co-slider>

With attributes


                                                        
                                                        
                                                            <co-slider input-left id=”range-slider” optional value=”10” min=”1” max=”100”
                                                        label-size=”lg” label="Slider label" helper-text="This is slider helper text">
                                                        </co-slider>

Properties

Property	Type	Description	Usage
input-left	Boolean	To display input at left side	input-left
input-right	Boolean	To display input at right side	input-right
optional	Boolean	To display optional text in label	optional= true \| false
label-size	String	To display label in different sizes. Default label-size=”md”	label-size= ”md” \| “lg” \| “xl” \| “2xl” \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl"
value	String	To display default value of input and range slider	value= ”10”
min	String	To define minimum value of slider. Default value min=”1”	min=”1”
max	String	To define maximum value of slider. Default value max=”100”	max=”100”
helper-text	String	To display helper text for slider	helper-text=”This is slider helper text”
validity-msg	String	To display error message if slider is invalid	validity-msg=”Entered value has exceeded the maximum limit”
invalid	Boolean	To be used to display if the field is invalid. Without this the invalid style wont apply.	invalid=”true \| false”

Slots

Developer can use either attributes mentioned in property table or use slots like below.

Name	Description	Usage
label	To display slider label	slot=”label”
helper-text	To display helper text for slider	<p slot="helper-text”>This is slider helper text</p>
validity-msg	To display error message if slider is invalid	<p slot="validity-msg”>Entered value has exceeded the maximum limit</p>