<div style='margin: 10px 0px;'>Default</div>
<jqxSlider #jqxSlider
           [tooltip]="true"
           [mode]="'fixed'">
</jqxSlider>
<div style='margin: 10px 0px;'>Primary</div>
<jqxSlider #jqxSlider2
           [template]="'primary'"
           [tooltip]="true"
           [mode]="'fixed'">
</jqxSlider>
<div style='margin: 10px 0px;'>Success</div>
<jqxSlider #jqxSlider3
           [template]="'success'"
           [tooltip]="true"
           [mode]="'fixed'">
</jqxSlider>
<div style='margin: 10px 0px;'>Info</div>
<jqxSlider #jqxSlider4
           [template]="'info'"
           [tooltip]="true"
           [mode]="'fixed'">
</jqxSlider>
<div style='margin: 10px 0px;'>Warning</div>
<jqxSlider #jqxSlider5
           [template]="'warning'"
           [tooltip]="true"
           [mode]="'fixed'">
</jqxSlider>
<div style='margin: 10px 0px;'>Danger</div>
<jqxSlider #jqxSlider6
           [template]="'danger'"
           [tooltip]="true"
           [mode]="'fixed'">
</jqxSlider>