1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import SliderModule from smart-webcomponents-angular/slider: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { SliderModule } from 'smart-webcomponents-angular/slider';

4 Root component (standalone)

Add SliderModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core';
import { SliderComponent } from 'smart-webcomponents-angular/slider';

import { SliderModule } from 'smart-webcomponents-angular/slider';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ SliderModule ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App implements AfterViewInit, OnInit {
    @ViewChild('slider', { read: SliderComponent, static: false }) slider!: SliderComponent;
    @ViewChild('slider2', { read: SliderComponent, static: false }) slider2!: SliderComponent;
    @ViewChild('slider3', { read: SliderComponent, static: false }) slider3!: SliderComponent;
    @ViewChild('slider4', { read: SliderComponent, static: false }) slider4!: SliderComponent;
    @ViewChild('horizontalSliderValue', { read: ElementRef, static: false }) horizontalSliderValue!: ElementRef;
    @ViewChild('verticalSliderValue', { read: ElementRef, static: false }) verticalSliderValue!: ElementRef;
    @ViewChild('invertedHorizontalSliderValue', { read: ElementRef, static: false }) invertedHorizontalSliderValue!: ElementRef;
    @ViewChild('invertedVerticalSliderValue', { read: ElementRef, static: false }) invertedVerticalSliderValue!: ElementRef;

    ngOnInit(): void {
        // onInit code.
    }

    ngAfterViewInit(): void {
        // afterViewInit code.
        this.init();
    }

    init(): void {
        // init code.
        const that = this,
            sliders = [that.slider, that.slider2, that.slider3, that.slider4];

        for (let i = 0; i < sliders.length; i++) {
            const slider = sliders[i];

            slider.addEventListener('change', function (event: CustomEvent) {
                const value = event.detail.value;
                //@ts-ignore
                that[slider.nativeElement.id + 'Value'].nativeElement.innerHTML = parseFloat('' + value).toFixed(2);
            } as EventListener);
        }
    }
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-slider as needed:

 <div class="container">
    <div class="underlined">Horizontal slider</div>Value: <span id="horizontalSlider[value]" #horizontalSliderValue>30.00</span>
    <smart-slider #slider id="horizontalSlider" [showTooltip]="true" [orientation]="'horizontal'" [min]="0"
                  [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
    <br />
    <div class="underlined">Vertical slider</div>Value: <span id="verticalSlider[value]" #verticalSliderValue>30.00</span>
    <smart-slider #slider2 id="verticalSlider" [showTooltip]="true" [tooltipPosition]="'far'" [orientation]="'vertical'"
                  [min]="0" [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
</div>
<div class="container">
    <div class="underlined">Inverted horizontal slider</div>Value: <span id="invertedHorizontalSlider[value]" #invertedHorizontalSliderValue>30.00</span>
    <smart-slider #slider3 id="invertedHorizontalSlider" [showTooltip]="true" [orientation]="'horizontal'"
                  [inverted]="true" [min]="0" [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
    <br />
    <div class="underlined">Inverted vertical slider</div>Value: <span id="invertedVerticalSlider[value]" #invertedVerticalSliderValue>30.00</span>
    <smart-slider #slider4 id="invertedVerticalSlider" [showTooltip]="true" [tooltipPosition]="'far'"
                  [orientation]="'vertical'" [inverted]="true" [min]="0" [max]="100" [value]="30" [scalePosition]="'none'"></smart-slider>
</div>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put SliderModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put SliderModule from smart-webcomponents-angular/slider on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from 'smart-webcomponents-angular/slider';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, SliderModule ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.