Overview of IntegralUI Slider

IntegralUI Slider is a native web component for Angular, React and Vue that allow you to change a numeric value within a range of defined minimum and maximum values. In this article, you will find general information about the slider component, including its properties, events and methods that you can use.

In this demo, there are two sliders: with a rectangle and round thumb button. You can move the slider by dragging it or by clicking the mouse to either side. You can also change the slider value with the mouse wheel.

Whenever the mouse hovers over the slider, the current slider position and the thumb button will become highlighted. The thumb button is transparent, except of its border. You can customize this using different colors or shapes via CSS.

How to Use IntegralUI Slider in Angular, React and Vue

To use the Slider component you need to do the following:

• In app template place the button component using the iui-slider tag name
• Set values for different properties available
• Handle the events in your code

• JavaScript
• Angular
• React
• Vue

public ctrlValue: number = 30;

<iui-slider [(ngModel)]="ctrlValue"></iui-slider>

By default, slider component has horizontal orientation and can move from minimum to the maximum value from left to right. You can change the orientation to vertical by setting the orientation property. In this case, the minimum value is at the bottom and you can move the slider to the maximum value at the top.

• JavaScript
• Angular
• React
• Vue

import { IntegralUIOrientation } from './integralui/components/integralui.core';

. . .

public ctrlOrientation: IntegralUIOrientation = IntegralUIOrientation.Vertical;
                                    

<iui-slider [(ngModel)]="ctrlValue" [orientation]="ctrlOrientation"></iui-slider>
                                    

Slider as Part of Other Web Components

Slider component is also usable as part of other components. For example, you can place a slider to the Toolbar component or add a slider to the cells in the Grid or TreeGrid component. Simply, place the slider in the cell template, and when grid updates it will show the slider inside the specified cell.

This component supports ngModel directive and can be used within Angular Forms.

List of Available Properties, Events and Methods in IntegralUI Slider

Supported Properties

You can use the following properties to change the appearance and behavior of the Slider component:

• allowAnimation - determines whether changes to the slider are animated or not
• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• enabled - determines whether slider is enabled or disabled
• max - specifies the maximum value
• min - specifies the minimum value
• name - uniquely identifies the component
• orientation - determines whether the slider appears horizontally or vertically
• size - specifies the component width and height
• state - specifies the component state: disabled, hovered, etc.
• value - holds the current slider value

Using the above properties, you can customize the Slider component in a way best suited for your application.

Supported Events

Here is a list of available events:

• enabledChanged - occurs when component is enabled or disabled
• sizeChanged - occurs when component size changes
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected
• valueChanged - occurs when value property changes

The valueChanged event is fired whenever the slider value changes. You can handle this event in your code and set an action based on the current slider value.

• JavaScript
• Angular
• React
• Vue

sliderValueChanged(e: any){
    console.log("Current slider value is: ", e.value);  
}
                                    

<iui-slider [(ngModel)]="ctrlValue" (valueChanged)="sliderValueChanged($event)"></iui-slider>
                                    

Supported Methods

The following public methods are available:

• updateLayout - updates the component layout

How to Customize the Slider Appearance

Several CSS classes govern the appearance of the Slider component, including animations. You can modify the slider appearance by changing the attributes of these classes or by providing your own CSS style sheet that will override the default appearance.

For this purpose, you can use the controlStyle property, where you need to specify the names of your CSS classes, for slider state (disabled, focused, hovered, normal and selected) and part that you want to change:

sliderStyle = {
    general: {
        disabled: 'iui-slider-disabled',
        focused: 'iui-slider-focused',
        normal: 'iui-slider',
        hovered: 'iui-slider-hovered',
        selected: 'iui-slider-selected'
    },
    content: {
        disabled: 'iui-slider-content-disabled',
        focused: 'iui-slider-content-focused',
        normal: 'iui-slider-content',
        hovered: 'iui-slider-content-hovered',
        selected: 'iui-slider-content-selected'
    },
    slider: {
        background: {
            disabled: 'iui-slider-background-disabled',
            focused: 'iui-slider-background-focused',
            normal: 'iui-slider-background',
            hovered: 'iui-slider-background-hovered',
            selected: 'iui-slider-background-selected'
        },
        button: {
            disabled: 'iui-slider-button'-disabled',
            focused: 'iui-slider-button'-focused',
            normal: 'iui-slider-button',
            hovered: 'iui-slider-button'-hovered',
            selected: 'iui-slider-button'-selected'
        }
    }
}
                    

In this example, the second slider has a thumb button appear as circle. A new CSS class is used that alters the button size and border shape.

• JavaScript
• Angular
• React
• Vue

public ctrlStyleRound: any = {
    general: { normal: 'sld-ovw' },
    slider: { 
        button: { normal: 'sld-ovw-slider-round' }
    }
}
                                    

<iui-slider [(ngModel)]="ctrlValue2" [controlStyle]="ctrlStyleRound"></iui-slider>
                                    

.sld-ovw
{
    width: 300px;
    height: 20px;
}
.sld-ovw-slider-round
{
    border-radius: 9px;
    width: 16px !important;
    height: 16px !important;
}
                                    

To disable animations of the slider state, you can simply set the allowAnimation property to false.

Conclusion

IntegralUI Slider is a web component that you can use in Angular, React and Vue. It allows you to change a numeric value within a range of defined minimum and maximum values. Using different properties and events and by providing your own CSS classes, you can customize the component appearance and behavior.

The Slider component is part of IntegralUI Web.