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

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

<div id="container" style="font-family: Verdana; font-size: 12px; float: left">
  <b>Default Layout</b>
  <jqxSlider [theme]="'material'" #horizontalSlider
             [height]="50"
             [width]="300">
  </jqxSlider>
  <jqxSlider [theme]="'material'" style="margin-top: 10px;" #verticalSlider
             [height]="300"
             [width]="50"
             [orientation]="'vertical'">
  </jqxSlider>
</div>
<div style="float: right; font-family: Verdana; font-size: 12px;" id="rightContainer">
  <b>Reversed Layout</b>
  <jqxSlider [theme]="'material'" #mirrorHorizontalSlider
             [height]="50"
             [width]="300"
             [layout]="'reverse'">
  </jqxSlider>
  <jqxSlider [theme]="'material'" style="margin-top: 10px; float: right;" #mirrorVerticalSlider
             [height]="300"
             [width]="50"
             [orientation]="'vertical'"
             [layout]="'reverse'">
  </jqxSlider>
</div>