Crestron Components Lib - Showcase App

ch5-slider styling

SASS variable Description
$ui-target-size height of the slider in px(when orientation="vertical" this will be the width of the slider)
$ui-target-bg background color of the slider
$ui-connect-bg background between the handles
$ui-target-border-color border color of the slider
$ui-target-border-style border style of the slider
$ui-target-border-width border width of the slider
$ui-handle-bg background color of the handle
$ui-handle-border-color border color of the handle
$ui-handle-border-style border style of the handle
$ui-handle-border-width border width of the handle
$ch5-slider-size-x-small-horizontal x-small width in px of the slider when orientation="horizontal"
$ch5-slider-size-small-horizontal small width in px of the slider when orientation="horizontal"
$ch5-slider-size-regular-horizontal regular width in px of the slider when orientation="horizontal"
$ch5-slider-size-large-horizontal large width in px of the slider when orientation="horizontal"
$ch5-slider-size-x-large-horizontal x-large width in px of the slider when orientation="horizontal"
$ch5-slider-size-x-small-vertical x-small height in px of the slider when orientation="vertical"
$ch5-slider-size-small-vertical small height in px of the slider when orientation="vertical"
$ch5-slider-size-regular-vertical regular height in px of the slider when orientation="vertical"
$ch5-slider-size-large-vertical large height in px of the slider when orientation="vertical"
$ch5-slider-size-x-large-vertical x-large height in px of the slider when orientation="vertical"
$ch5-slider-size-x-small-horizontal-width x-small width in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-small-horizontal-width small width in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-regular-horizontal-width regular width in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-large-horizontal-width large width in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-x-large-horizontal-width x-large width in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-x-small-horizontal-height x-small height in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-small-horizontal-height small height in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-regular-horizontal-height regular height in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-large-horizontal-height large height in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-x-large-horizontal-height x-large height in px of the handle when handleShape="rounded-rectangle|rectangle"
$ch5-slider-size-x-small-horizontal-circle-size x-small size in px of the handle when handleShape="circle"
$ch5-slider-size-small-horizontal-circle-size small size in px of the handle when handleShape="circle"
$ch5-slider-size-regular-horizontal-circle-size regular size in px of the handle when handleShape="circle"
$ch5-slider-size-large-horizontal-circle-size large size in px of the handle when handleShape="circle"
$ch5-slider-size-x-large-horizontal-circle-size x-large size in px of the handle when handleShape="circle"
$ch5-slider-size-x-small-horizontal-oval-size x-small size in px of the handle when handleShape="oval"
$ch5-slider-size-small-horizontal-oval-size small size in px of the handle when handleShape="oval"
$ch5-slider-size-regular-horizontal-oval-size regular size in px of the handle when handleShape="oval"
$ch5-slider-size-large-horizontal-oval-size large size in px of the handle when handleShape="oval"
$ch5-slider-size-x-large-horizontal-oval-size x-large size in px of the handle when handleShape="oval"