Usage
<cui-slider id="slider" ui-style="font-size: 0.8rem;"
ui-range="false" ui-vertical="false" ui-reversed="false" ui-show-buttons="true"
ui-width="100%" ui-min-change="1" ui-max-value="40"
ui-tick-mark-side="3" ui-tick-mark-value-side="2"
ui-tick-marks="40" ui-major-tick-mark-step="10"
ui-minor-tick-mark-step="5" ui-tick-mark-value-step="5""></cui-slider>
const slider = $UI.createComponent(componyx.UI.Slider, {
id: 'slider',
style: 'font-size: 0.8rem;',
width: '100%',
range: false,
vertical: false,
reversed: false,
showButtons: true,
minChange: 1,
maxValue: 40,
tickMarkSide: componyx.UI.Slider.TickMarkSideOption.BOTH,
tickMarkValueSide: componyx.UI.Slider.TickMarkSideOption.AFTER,
tickMarks: 40,
majorTickMarkStep: 10,
minorTickMarkStep: 5,
tickMarkValueStep: 5,
containerElement: document.body
});
slider.show();
tickMarkSide and tickMarkValueSide accept the numeric
componyx.UI.Slider.TickMarkSideOption enum: 0 None, 1 Before, 2 After, 3 Both.
Our demo above uses ui-width="100%" so the track fills its container
responsively. A fixed pixel value also works, e.g. ui-width="400px" and
there's a separate trackSize property as well, check the
API reference for how it differs from
width.