Use Kendo UI Slider with Angular 2

[Lance]

I have an angular 2 application and I want to use the Kendo UI Slider on it.  I tried the Beta version of the "Kendo UI for Angular 2" but it did not work properly and I don't want to use a beta version. 

How can I use the normal kendo Slider with Angular 2?  I want the slider to have ticks with number tick labels.  I am using Visual Studio 2015.

 

Please help.

[Lance]

Below is how my slider was configured when I was using angular 1.58.  I want the same thing for angular 2.

<input kendo-slider k-options="slideroptions" k-max="NoOfCells" k-rebind="NoOfCells" ng-model="NoOfUnits" k-tooltip="{ enabled: true }" ng-disabled="!common.cellOrStringConfig.Battery" /> 

scope.slideroptions = {
        largeStep: 1,
        min: 1
    };

[Dimiter Topalov]

Hello Lance,

Thank you for your interest in Kendo UI for Angular 2.

This is a new and separate product, currently in beta stage and free for use and community preview. We will release a commercial offering in 2017 and that will also include dedicated support service.

In the meantime, the Community & Support page outlines the available options to receive technical assistance via StackOverflow or Telerik Professional Services, or report issues and provide feedback in our kendo-angular2 GitHub repository.

Stay tuned and keep an eye on our Kendo UI for Angular 2 site and the roadmap, the Telerik blogs (specifically, the Kendo UI Product Manager posts) and GitHub repository for updates.

Regards,
Dimiter Topalov
Telerik by Progress

[Lance]

Hi,
I've managed to achieve what I wanted.  Below is my solution in case it helps anyone else.
slider.component.ts:
import { Component, OnInit, forwardRef, Input, OnChanges } from'@angular/core'; import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from'@angular/forms'; declarevar jQuery: any; @Component({     selector: 'slider',     template: `        <div class="kendoslider">            <input type="text">            <input type="text">        </div>  `,     providers: [         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true },         { provide: NG_VALIDATORS, useExisting: forwardRef(() => SliderComponent), multi: true }     ] }) exportclass SliderComponent implements ControlValueAccessor {     private _slider: any;     @Input('sliderValue') _sliderValue: number = 1;     @Input('min') _min: number = 1;     @Input('max') _max: number = 10;     @Input('smallStep') _smallStep: number = 1;     @Input('largeStep') _largeStep: number = 1;     @Input('tickPlacement') _tickPlacement: string = "both";     get sliderValue()     {         returnthis._sliderValue;     }     set sliderValue(val)     {         this._sliderValue = val;         this.propagateChange(val);     }     propagateChange: any = () => {  };     validateFn: any = () => { };     constructor()     {     }     writeValue(value: any)     {         if (value)         {             this.sliderValue = value;         }     }     registerOnChange(fn: any)     {         this.propagateChange = fn;     }     registerOnTouched(){}     validate(c: FormControl)     {         returnthis.validateFn(c);     }     ngOnChanges()     {         if (this._slider)         {             let wrapper: any = this._slider.wrapper;             let element: any = this._slider.element;             // detach eventsthis._slider.destroy();             // remove slider html from DOM             wrapper.before(element.show());             wrapper.remove();             this._slider = null;             this.initialiseSlider();             this._slider.enable();         }         else         {             this.initialiseSlider();         }     }     initialiseSlider(): void     {         if (!this._slider)         {             this._slider = jQuery(".kendoslider").kendoSlider({                 change: (e: any) =>                 {                     this.writeValue(e.value);                 },                 precision: 0,                 min: Number(this._min),                 max: Number(this._max),                 smallStep: Number(this._smallStep),                 largeStep: Number(this._largeStep),                 tickPlacement: Number(this._tickPlacement)             }).data("kendoSlider");             this._slider.value(Number(this._max));         }     } }
References in Index.html:
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" /><link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" /><script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.core.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.userevents.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.draganddrop.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.slider.min.js"></script>
Usage in components:
<slidername="kSlider"[(ngModel)]=".NoOfUnits"min="1"[max]="NoOfCells"largeStep="1"smallStep="1"></slider>
Be sure to import slider.component and add to @NgModule declarations in app.modules.ts.      
   

[Lance]

Hi,

I've managed to achieve what I wanted.  Below is my solution in case it helps anyone else.

slider.component.ts:
import { Component, OnInit, forwardRef, Input, OnChanges } from'@angular/core';
import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from'@angular/forms';

declarevar jQuery: any;

@Component({
    selector: 'slider',
    template: `        <div class="kendoslider">            <input type="text">            <input type="text">        </div>  `,
    providers: [
        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true },
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SliderComponent), multi: true }
    ]
})

exportclass SliderComponent implements ControlValueAccessor
{
    private _slider: any;

    @Input('sliderValue') _sliderValue: number = 1;
    @Input('min') _min: number = 1;
    @Input('max') _max: number = 10;
    @Input('smallStep') _smallStep: number = 1;
    @Input('largeStep') _largeStep: number = 1;
    @Input('tickPlacement') _tickPlacement: string = "both";

    get sliderValue()
    {
        returnthis._sliderValue;
    }

    set sliderValue(val)
    {
        this._sliderValue = val;
        this.propagateChange(val);
    }

    propagateChange: any = () => {  };

    validateFn: any = () => { };

    constructor()
    {

    }

    writeValue(value: any)
    {
        if (value)
        {
            this.sliderValue = value;
        }
    }

    registerOnChange(fn: any)
    {
        this.propagateChange = fn;
    }

    registerOnTouched(){}

    validate(c: FormControl)
    {
        returnthis.validateFn(c);
    }

    ngOnChanges()
    {
        if (this._slider)
        {
            let wrapper: any = this._slider.wrapper;
            let element: any = this._slider.element;

            // detach eventsthis._slider.destroy();

            // remove slider html from DOM
            wrapper.before(element.show());
            wrapper.remove();

            this._slider = null;

            this.initialiseSlider();

            this._slider.enable();
        }
        else
        {
            this.initialiseSlider();
        }
    }

    initialiseSlider(): void
    {
        if (!this._slider)
        {
            this._slider = jQuery(".kendoslider").kendoSlider({
                change: (e: any) =>
                {
                    this.writeValue(e.value);
                },
                precision: 0,
                min: Number(this._min),
                max: Number(this._max),
                smallStep: Number(this._smallStep),
                largeStep: Number(this._largeStep),
                tickPlacement: Number(this._tickPlacement)
            }).data("kendoSlider");

            this._slider.value(Number(this._max));
        }
    }
}

References in Index.html:

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.userevents.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.draganddrop.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.slider.min.js"></script>
Usage in components:

<slidername="kSlider"[(ngModel)]=".NoOfUnits"min="1"[max]="NoOfCells"largeStep="1"smallStep="1"></slider>

Be sure to import slider.component and add to @NgModule declarations in app.modules.ts.