@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
162 lines (161 loc) • 6.53 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { EventEmitter, Injector, Renderer2, NgZone, ChangeDetectorRef, ElementRef } from '@angular/core';
import { Subscription } from 'rxjs';
import { NgControl } from '@angular/forms';
import { LabelTemplateDirective } from './label-template.directive';
import { SliderTickTitleCallback } from './title-callback';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export declare abstract class SliderBase {
protected localizationService: LocalizationService;
protected injector: Injector;
protected renderer: Renderer2;
protected ngZone: NgZone;
protected changeDetector: ChangeDetectorRef;
protected hostElement: ElementRef;
/**
* Sets the title for the ticks.
* The default title for each tick is its Slider value.
* If you use a callback function, the function receives the component value and returns a string for the new title [see example]({% slug ticks_slider %}#toc-titles).
*/
title: SliderTickTitleCallback;
/**
* Sets the location of the tick marks in the Slider [see example]({% slug ticks_slider %}#toc-placement).
*
* The options are:
* - `before` – Shows tick marks above a horizontal track or left of a vertical track.
* - `after` – Shows tick marks below a horizontal track or right of a vertical track.
* - `both` – Shows tick marks on both sides of the track.
* - `none` – Hides tick marks and removes them from the DOM.
*
* @default 'both'
*/
tickPlacement: string;
/**
* When `true`. renders a vertical Slider [see example]({% slug orientation_slider %}).
*
* @default false
*/
vertical: boolean;
/**
* Sets the minimum value of the Slider.
* Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
*
* @default 0
*/
min: number;
/**
* Sets the maximum value of the Slider.
* Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
*
* @default 10
*/
max: number;
/**
* Sets the step value of the Slider.
* Accepts only positive values.
* Can be an integer or a floating-point number [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
*
* @default 1
*/
smallStep: number;
/**
* Sets every n<sup>th</sup> tick as large and shows a label for it [see example]({% slug predefinedsteps_slider %}#toc-large-steps).
*
* @default null
*/
largeStep: number;
/**
* Sets the width between two ticks along the track, in pixels.
* If you do not set `fixedTickWidth`, the Slider adjusts the tick width automatically [see example]({% slug ticks_slider %}#toc-width).
*
*/
fixedTickWidth: number;
/**
* When `true`, disables the Slider.
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_slider#toc-managing-the-slider-disabled-state-in-reactive-forms) [see example]({% slug disabledstate_slider %}).
*
* @default false
*/
disabled: boolean;
/**
* When `true`, sets the Slider to read-only [see example]({% slug readonly_slider %}).
*
* @default false
*/
readonly: boolean;
/**
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Slider.
*
* @default 0
*/
tabindex: number;
/**
* Fires when the user focuses the component.
*
*/
onFocus: EventEmitter<any>;
/**
* Fires when the component is blurred.
*
*/
onBlur: EventEmitter<any>;
/**
* Fires when the user selects a new value.
*
*/
valueChange: EventEmitter<any>;
direction: string;
get horizontalClass(): boolean;
get verticalClass(): boolean;
sliderClass: boolean;
get disabledClass(): boolean;
wrapper: ElementRef;
track: ElementRef;
sliderSelection: ElementRef;
ticksContainer: ElementRef;
ticks: any;
labelTemplate: LabelTemplateDirective;
protected subscriptions: Subscription;
protected isFocused: boolean;
protected isDragged: boolean;
protected control: NgControl;
constructor(localizationService: LocalizationService, injector: Injector, renderer: Renderer2, ngZone: NgZone, changeDetector: ChangeDetectorRef, hostElement: ElementRef);
/**
* @hidden
* Called when the status of the component changes to or from `disabled`.
* Depending on the value, it enables or disables the appropriate DOM element.
*
* @param isDisabled
*/
setDisabledState(isDisabled: boolean): void;
ngOnInit(): void;
/**
* @hidden
*/
abstract sizeComponent(animate?: boolean): void;
/**
* @hidden
*/
get isDisabled(): boolean;
/**
* @hidden
*/
ifEnabled: Function;
/**
* @hidden
* Used by the FloatingLabel to determine if the component is empty.
*/
isEmpty(): boolean;
protected get reverse(): boolean;
protected get keyBinding(): Object;
protected resetStyles(elements: HTMLElement[]): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SliderBase, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SliderBase, "kendo-slider-base", never, { "title": { "alias": "title"; "required": false; }; "tickPlacement": { "alias": "tickPlacement"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "smallStep": { "alias": "smallStep"; "required": false; }; "largeStep": { "alias": "largeStep"; "required": false; }; "fixedTickWidth": { "alias": "fixedTickWidth"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; }, { "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; }, ["labelTemplate"], never, false, never>;
}