Crestron Components Lib - Showcase App

ch5-slider: size

ch5-slider size

Valid values: x-small, small, regular, large, x-large

Default regular.

Preview

HTML
JS
CSS

<ch5-slider customClass="oslider"> </ch5-slider>
<ch5-slider customClass="oslider" size="x-small"> </ch5-slider>
<ch5-slider customClass="oslider" size="small"> </ch5-slider>
<ch5-slider customClass="oslider" size="regular"> </ch5-slider>
<ch5-slider customClass="oslider" size="large"> </ch5-slider>
<ch5-slider customClass="oslider" size="x-large"> </ch5-slider>

.oslider {
    display: block;
    margin-bottom: 10px;
}

Execute JS before HTML

vertical size

Preview

HTML
JS
CSS

<ch5-slider orientation="vertical" customClass="vslider"></ch5-slider>
<ch5-slider size="x-small" orientation="vertical" customClass="vslider"></ch5-slider>
<ch5-slider size="small" orientation="vertical" customClass="vslider"></ch5-slider>
<ch5-slider size="regular" orientation="vertical" customClass="vslider"></ch5-slider>
<ch5-slider size="large" orientation="vertical" customClass="vslider"></ch5-slider>
<ch5-slider size="x-large" orientation="vertical" customClass="vslider"></ch5-slider>

.vslider {
    margin-right: 10px;
}

Execute JS before HTML