jqwidgets-scripts-custom/demos/Angular/slider/defaultfunctionality/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<div style="width: 550px">
  <div style="height: 180px;">
    <div style="float: left">
      <span style="font-style: italic;">Red</span>
      <jqxSlider [theme]="'material'" #redSlider (onChange)='redSliderOnChange()'
                 [height]='60' [min]='0' [max]='255' [tickLabelFormatFunction]='tickLabelFormatFunction'
                 [value]='0' [step]='25.5' [mode]='"fixed"' [tooltipFormatFunction]='tooltipFormatFunction'
                 [showTickLabels]='true' [tooltip]='true' [ticksFrequency]='25.5'>
      </jqxSlider>
      <span style="font-style: italic;">Green</span>
      <jqxSlider [theme]="'material'" #greenSlider (onChange)='greenSliderOnChange()'
                 [height]='60' [min]='0' [max]='255' [tickLabelFormatFunction]='tickLabelFormatFunction'
                 [value]='0' [step]='25.5' [mode]='"fixed"' [tooltipFormatFunction]='tooltipFormatFunction'
                 [showTickLabels]='true' [tooltip]='true' [ticksFrequency]='25.5'>
      </jqxSlider>
      <span style="font-style: italic;">Blue</span>
      <jqxSlider [theme]="'material'" #blueSlider (onChange)='blueSliderOnChange()'
                 [height]='60' [min]='0' [max]='255' [tickLabelFormatFunction]='tickLabelFormatFunction'
                 [value]='255' [step]='25.5' [mode]='"fixed"' [tooltipFormatFunction]='tooltipFormatFunction'
                 [showTickLabels]='true' [tooltip]='true' [ticksFrequency]='25.5'>
      </jqxSlider>
    </div>
    <div class="jqx-rc-all colorBlock" id="colorBlock">
      <div id="colorLabel"></div>
    </div>
  </div>
  <jqxCheckBox [theme]="'material'" (onChange)='checkBoxOnChange($event)'
               [width]='200' [checked]='false'>
    Smooth Thumb Drag
  </jqxCheckBox>
</div>