@natec/mef-dev-ui-kit documentation
  1. Components
  2. MefDevSliderComponent

File

src/lib/markup-kit/slider/slider/slider.component.ts

Description

Component for a slider that allows selecting a range of values.

<mefdev-slider
 [disabled]="false"
 [range] = "{min: 1, max: 10000}"
 [id]= "'slider1'"
 (valueChange)="onChildValueChange($event)"
 ></mefdev-slider>

https://mef.dev/ui_kit_demo/view/controls/slider

Metadata

selector mefdev-slider
styleUrls ./slider.component.scss
templateUrl ./slider.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

disabled
Type : boolean
Default value : false

Property indicating whether the component is disabled.

<mefdev-slider
 [disabled]="true"
></mefdev-slider>
id
Type : string

Unique id for each slider. Use it, if u need more than one slider independent from another on the same page.

<mefdev-slider
 [id]= "'slider1'"
></mefdev-slider>
range
Type : literal type

Input Object {min, max} container of the slider

<mefdev-slider
 [range] = "{min: 1, max: 10000}"
></mefdev-slider>

Outputs

valueChange
Type : EventEmitter<literal type>

Event emitted when the values of the slider change. It passes an object with minValue and maxValue properties.

<mefdev-slider
 (valueChange)="onChildValueChange($event)"
></mefdev-slider>

Methods

onMaxValueChange
onMaxValueChange()

Method to handle changes in the maximum value. Converts a string to a number and removes all non-numeric characters. Then, emits the valueChange event and updates the value of the "toSlider" slider.

Returns : void
onMinValueChange
onMinValueChange()

Method to handle changes in the minimum value. Converts a string to a number and removes all non-numeric characters. Then, emits the valueChange event and updates the value of the "fromSlider" slider.

Returns : void
onValueChange
onValueChange()

Method called when the values of the slider change. Emits the valueChange event and calls methods to handle changes in the minimum and maximum values.

Returns : void

Properties

maxValue
Type : number
Default value : this.range.max

The maximum value of the slider.
minValue
Type : number
Default value : this.range.min

The minimum value of the slider.

Accessors

range
getrange()
setrange(range: literal type)

Input Object {min, max} container of the slider

<mefdev-slider
 [range] = "{min: 1, max: 10000}"
></mefdev-slider>
Parameters :
Name Type Optional
range literal type No
Returns : void

results matching ""

    No results matching ""