This is a migrated thread and some comments may be shown as answers.

Use Kendo UI Slider with Angular 2

4 Answers 216 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Lance
Top achievements
Rank 1
Lance asked on 05 Oct 2016, 09:05 PM

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.

4 Answers, 1 is accepted

Sort by
0
Lance
Top achievements
Rank 1
answered on 05 Oct 2016, 09:17 PM

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
    };

0
Dimiter Topalov
Telerik team
answered on 07 Oct 2016, 02:11 PM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Lance
Top achievements
Rank 1
answered on 21 Oct 2016, 04:21 PM
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.      
   
0
Lance
Top achievements
Rank 1
answered on 21 Oct 2016, 04:24 PM
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>
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.
 
       
 
 
 
   
Tags
Slider
Asked by
Lance
Top achievements
Rank 1
Answers by
Lance
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or