The Date formatting can be achieved in ticks
and tooltip
using renderingTicks
and tooltipChange
events respectively. The process
of formatting is explained in the below sample.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
private defaultObj: SliderComponent;
public min = new Date("2013-06-13").getTime();
public max = new Date("2013-06-21").getTime();
public step = 86400000;
public value = new Date("2013-06-15").getTime();
// Slider ticks customization
public ticks= { placement: 'After', largeStep: 2 * 86400000 };
public tooltip= { placement: 'Before', isVisible: true };
renderingTicksHandler (args: SliderTickEventArgs) {
let totalMiliSeconds = Number(args.value);
// Converting the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
tooltipChangeHandler(args: SliderTooltipEventArgs) {
let totalMiliSeconds = Number(args.text);
// Converting the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
render() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' min={this.min} max={this.max} value={this.value} step={this.step}
tooltip={this.tooltip} ticks={this.ticks} showButtons={true} ref={(slider) => { this.defaultObj = slider }}
tooltipChange={this.tooltipChangeHandler.bind(this)} renderingTicks={this.renderingTicksHandler.bind(this)} />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.sliderwrap {
margin-top: 20px;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
.labeltext {
text-align: center;
}
The time formatting can be achieved same as the date formatting using renderingTicks
and change
events. The process of time formatting is
explained in the below sample.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
private defaultObj: SliderComponent;
public min = new Date(2013, 6, 13, 11).getTime();
public max = new Date(2013, 6, 13, 17).getTime();
public value = new Date(2013, 6, 13, 13).getTime();
public step = 3600000;
// Slider ticks customization
public ticks= { placement: 'After', largeStep: 2 * 3600000 };
public tooltip= { placement: 'Before', isVisible: true };
renderingTicksHandler (args: SliderTickEventArgs) {
let totalMiliSeconds = Number(args.value);
let custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
tooltipChangeHandler(args: SliderTooltipEventArgs) {
let totalMiliSeconds = Number(args.text);
let custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
render() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' min={this.min} max={this.max} value={this.value} step={this.step} tooltip={this.tooltip}
ticks={this.ticks} showButtons={true} ref={(slider) => { this.defaultObj = slider }}
tooltipChange={this.tooltipChangeHandler.bind(this)} renderingTicks={this.renderingTicksHandler.bind(this)} />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.sliderwrap {
margin-top: 20px;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
.labeltext {
text-align: center;
}
The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
private defaultObj: SliderComponent;
// Slider ticks customization
public ticks01 = { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true };
public tooltip01 = { isVisible: true, format: '##.## Km' };
public ticks02 = { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true };
public tooltip02 = { isVisible: true, format: '##.#00' };
public tooltip03 = { isVisible: true, format: '00##' };
public ticks03 = { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true };
render() {
return (
<div id='container'>
<div className='wrap'>
<div className='label'>Slider formatted with unit representation</div>
<SliderComponent id='slider' min={0} max={100} value={30} step={1} tooltip={this.tooltip01} ticks={this.ticks01} />
</div>
<div className='wrap'>
<div className='label'>Slider formatted with three decimal specifiers</div>
<SliderComponent id='slider1' min={0.1} max={0.2} value={0.13} step={0.01} tooltip={this.tooltip02} ticks={this.ticks02} />
</div>
<div className='wrap'>
<div className='label'>Slider formatted with two leading zeros</div>
<SliderComponent id='slider2' min={0} max={100} value={30} step={1} tooltip={this.tooltip03} ticks={this.ticks03} />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.sliderwrap {
margin-top: 20px;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
.labeltext {
text-align: center;
}
Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the slider bar. The slider bar can be customized with different themes. By default, slider have class name e-slider-track for bar. The class can be overridden with our own color values like the following code snippet.
.e-control.e-slider .e-slider-track .e-range {
background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}
private change(args: SliderChangeEventArgs) {
if (args.value > 0 && args.value <= 25) {
// Change handle and range bar color to green when
(sliderHandle as HTMLElement).style.backgroundColor = 'green';
(sliderTrack as HTMLElement).style.backgroundColor = 'green';
} else if (args.value > 25 && args.value <= 50) {
// Change handle and range bar color to royal blue
(sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
(sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
} else if (args.value > 50 && args.value <= 75) {
// Change handle and range bar color to dark orange
(sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
(sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
} else if (args.value > 75 && args.value <= 100) {
// Change handle and range bar color to red
(sliderHandle as HTMLElement).style.backgroundColor = 'red';
(sliderTrack as HTMLElement).style.backgroundColor = 'red';
}
}
You can also apply background color for a certain range depending upon slider values, using change event.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
private defaultObj: SliderComponent;
private sliderTrack: HTMLElement;
private sliderHandle: HTMLElement;
private changeEvent (args: SliderChangeEventArgs): void {
if (args.value > 0 && args.value <= 25) {
// Change handle and range bar color to green when
(this.sliderHandle as HTMLElement).style.backgroundColor = 'green';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'green';
} else if (args.value > 25 && args.value <= 50) {
// Change handle and range bar color to royal blue
(this.sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
} else if (args.value > 50 && args.value <= 75) {
// Change handle and range bar color to dark orange
(this.sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
} else if (args.value > 75 && args.value <= 100) {
// Change handle and range bar color to red
(this.sliderHandle as HTMLElement).style.backgroundColor = 'red';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'red';
}
}
private created(): void {
this.sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');
this.sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');
(this.sliderHandle as HTMLElement).style.backgroundColor = 'green';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'green';
}
render() {
return (
<div id='container'>
<div className="col-lg-12 control-section">
<div className="slider-content-wrapper">
<div className="slider_container">
<div className="slider-labeltext slider_userselect">Height</div>
<SliderComponent id='height_slider' min={0} max={100} value={30} />
</div>
<div className="slider_container">
<div className="slider-labeltext slider_userselect">Gradient color</div>
<SliderComponent id='gradient_slider' type='MinRange' min={0} max={100} value={30} />
</div>
<div className="slider_container">
<div className="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
<SliderComponent id='dynamic_color_slider' ref={(slider) => { this.defaultObj = slider }}
type='MinRange' min={0} max={100} value={30} change={this.changeEvent.bind(this)}
created={this.created.bind(this)} />
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.slider-content-wrapper {
width: 40%;
margin: 0 auto;
min-width: 185px;
}
.slider-userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.slider-labeltext {
text-align: left;
font-weight: 500;
font-size: 13px;
padding-bottom: 10px;
}
#height_slider .e-handle, #gradient_slider .e-handle {
height: 20px;
width: 20px;
margin-left: -10px;
top: calc(50% - 10px);
}
.slider_container {
margin-top: 40px;
}
#height_slider .e-tab-handle::after {
background-color: #f9920b;
}
#height_slider .e-slider-track {
height: 8px;
top: calc(50% - 4px);
border-radius: 0;
}
#gradient_slider .e-range {
height: 6px;
top: calc(50% - 3px);
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
background: -moz-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}
#gradient_slider .e-slider-track {
height: 8px;
top: calc(50% - 4px);
border-radius: 5px;
}
Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized.
.e-slider-container.e-horizontal .e-limits {
background-color: rgba(69, 100, 233, 0.46);
}
Here, the limit bar is customized with different background color. By default, the slider has class e-limits
for limits bar.
You can override the class with our own color values as given in the following code snippet.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
private defaultObj: SliderComponent;
private value: number[] = [30, 70];
private ticks: object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
// Initialize tooltip with placement and showOn
private tooltip: object = { isVisible: true, placement: 'Before', showOn: 'Focus' };
// Set the limit values for the minrange slider
private minLimits: object = { enabled: true, minStart: 10, minEnd: 40 };
// Set the limit values for the range slider
private rangeLimits: object = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
render() {
return (
<div id='container'>
<div className="content-wrapper">
<div className='sliderwrap'>
<label className="userselect">MinRange Slider With Limits</label>
<SliderComponent id='minrange'
type='MinRange'
min={0} max={100} value={30} ticks={this.ticks} tooltip={this.tooltip} limits={this.minLimits} />
</div>
<div className='sliderwrap'>
<label className="userselect">Range Slider With Limits</label>
<SliderComponent id='range' type='Range'
min={0} max={100} value={this.value} ticks={this.ticks} tooltip={this.tooltip} limits={this.rangeLimits} />
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.content-wrapper {
width: 52%;
margin: 0 auto;
min-width: 185px;
}
.sliderwrap {
margin-top: 45px;
}
.e-bigger .content-wrapper {
width: 80%;
}
.sliderwrap label {
padding-bottom: 50px;
font-size: 13px;
font-weight: 500;
margin-top: 15px;
display: block;
}
.userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.property-custom td {
padding: 5px;
}
#range .e-limits, #minrange .e-limits {
background-color: #ccc;
background-color: rgba(69, 100, 233, 0.46);
}
Slider view can be customized via CSS. By overriding the slider CSS classes, you can customize the ticks. The ticks in slider allows you to easily identify the current value/values of the slider. It contains smallStep
and largeStep
. By default, slider has class e-tick
for slider ticks. You can override the class as per your requirement. Refer to the following code snippet to render ticks.
.e-scale .e-tick.e-custom::before {
content: '\e967';
position: absolute;
}
#ticks_slider .e-scale :nth-child(1)::before {
color: red;
}
Here, the color for rendered ticks has been applied through nth-child(child_number
). The color is applied to the value of the child_number
in the slider.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderTickRenderedEventArgs, SliderTickEventArgs } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
private defaultObj: SliderComponent;
private value: number[] = [30, 70];
private icon: object = { placement: 'Before', largeStep: 20 };
private custom: object = { placement: 'Both', largeStep: 20, smallStep: 5 };
private iconTicks(args: SliderTickEventArgs): void {
if (args.tickElement.classList.contains('e-large')) {
args.tickElement.classList.add('e-custom');
}
}
private customTicks(args: SliderTickRenderedEventArgs): void {
let li: any = args.ticksWrapper.getElementsByClassName('e-large');
let remarks: any = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
for (let i: number = 0; i < li.length; ++i) {
(li[i].querySelectorAll('.e-tick-both')[1] as HTMLElement).innerText = remarks[i];
}
}
render() {
return (
<div id='container'>
<div className="col-lg-12 control-section">
<div className="slider-content-wrapper">
<div className="slider_container" id="slider_wrapper">
<div className="slider_labelText userselect">Dynamic ticks color</div>
<SliderComponent id='ticks_slider'
type='MinRange'
min={0} max={100} step={5} value={30} ticks={this.icon} renderingTicks={this.iconTicks.bind(this)} />
</div>
<div className="slider_container">
<div className="slider_labelText userselect">Ticks with legends</div>
<SliderComponent id='slider' type='MinRange'
min={0} max={100} value={this.value} ticks={this.custom} renderedTicks={this.customTicks.bind(this)} />
</div>
<div/>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.slider-content-wrapper {
width: 40%;
margin: 0 auto;
min-width: 185px;
}
.userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.slider_labelText {
text-align: left;
font-weight: 500;
font-size: 13px;
padding-bottom: 40px;
}
.slider_container {
margin-top: 40px;
}
.e-bigger .slider-content-wrapper {
width: 80%;
}
#ticks_slider .e-range {
z-index: unset;
}
@font-face {
font-family: 'e-customized-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
#ticks_slider .e-scale .e-tick {
background-image: none;
visibility: visible;
font-family: 'e-customized-icons';
}
#ticks_slider .e-scale {
z-index: 0;
}
#ticks_slider .e-scale .e-custom::before {
content: '\e967';
position: absolute;
}
#ticks_slider .e-scale :nth-child(1)::before {
color: red;
}
#ticks_slider .e-scale :nth-child(2)::before {
color: blue;
}
#ticks_slider .e-scale :nth-child(3)::before {
color: green;
}
#ticks_slider .e-scale :nth-child(4)::before {
color: blueviolet;
}
#ticks_slider .e-scale :nth-child(5)::before {
color: orange;
}
#ticks_slider .e-scale :nth-child(6)::before {
color: pink;
}
#ticks_slider .e-scale .e-custom::before {
font-size: 10px;
}
#ticks_slider .e-scale .e-custom::before {
top: calc(50% + 1px);
left: calc(50% - 5px);
}
#slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
top: calc(50% + 1px);
left: calc(0% - 5px);
}
#slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
top: calc(50% + 1px);
left: calc(100% - 6px);
}
Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, slider has unique class e-handle
for slider thumb. You can override the following class as per your requirement.
.e-control.e-slider .e-handle {
background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
background-color: transparent;
height: 25px;
width: 25px;
}
#square_slider.e-control.e-slider .e-handle {
border-radius: 0%;
background-color: #f9920b;
border: 0;
}
#circle_slider.e-control.e-slider .e-handle {
border-radius: 50%;
background-color: #f9920b;
border: 0;
}
#oval_slider.e-control.e-slider .e-handle {
height: 25px;
width: 8px;
top: 3px;
border-radius: 15px;
background-color: #f9920b;
}
Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderTickRenderedEventArgs, SliderTickEventArgs } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
render() {
return (
<div id='container'>
<div className="col-lg-12 control-section">
<div className="slider-content-wrapper">
<div className="slider_container">
<div className="labelText slider-userselect">Square</div>
<SliderComponent id='square_slider' min={0} max={100} value={30} />
</div>
<div className="slider_container">
<div className="labelText slider-userselect">Circle</div>
<SliderComponent id='circle_slider' min={0} max={100} value={30} />
</div>
<div className="slider_container">
<div className="labelText slider-userselect">Oval</div>
<SliderComponent id='oval_slider' min={0} max={100} value={30} />
</div>
<div className="slider_container">
<div className="labelText slider-userselect">Custom image</div>
<SliderComponent id='image_slider' min={0} max={100} value={30} />
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.slider-content-wrapper {
width: 40%;
margin: 0 auto;
min-width: 185px;
}
.slider-userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.labelText {
text-align: left;
font-weight: 500;
padding-bottom: 10px;
}
.slider_container {
margin-top: 40px;
}
.e-bigger .content-wrapper {
width: 80%;
}
#square_slider .e-handle {
border-radius: 0;
background-color: #f9920b;
border: 0;
}
#circle_slider .e-handle {
background-color: #f9920b;
border-radius: 50%;
border: 0;
}
#image_slider .e-handle {
height: 25px;
width: 24px;
background-size: 24px;
}
#image_slider .e-handle {
background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
background-repeat: no-repeat;
background-color: transparent;
border: 0;
}
#square_slider .e-tab-handle::after,
#circle_slider .e-tab-handle::after {
background-color: #f9920b;
}
#image_slider .e-tab-handle::after {
background-color: transparent;
}
#oval_slider .e-handle {
height: 25px;
width: 8px;
top: 3px;
border-radius: 15px;
background-color: #f9920b;
}
The Slider component can be validated using our FormValidator. The following steps walk-through slider validation.
// Initialize Form validation
let formObj: FormValidator;
formObj = new FormValidator("#formId", options);
validateHidden
property is set to true.// Slider element
<div id="default" name="slider"></div>
// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
rules: {
'default': {
validateHidden: true,
min: [6, "You must select value greater than 5"]
}
}
};
Form validation is done either by ID or name value of the slider component. Above ID of the slider is used to validate it.
Using slider name: Render slider with name attribute. In the following code snippet, name attribute value of slider is used for form validation.
// Slider element
<div id="default" name="slider"></div>
// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
rules: {
'slider': {
validateHidden: true,
min: [6, "You must select value greater than 5"]
}
}
};
formObj.validate();
// change event handler for slider
function onChanged(args: any) {
formObj.validate();
}
The FormValidator
has following default validation rules, which are used to validate the Slider component.
Rules | Description | Example |
---|---|---|
max |
Slider component must have value less than or equal to max number |
if max: 3 , 3 is valid and 4 is invalid |
min |
Slider component must have value greater than or equal to min number |
if min: 4 , 5 is valid and 2 is invalid |
regex |
Slider component must have valid value in regex format |
if regex: '/4/ , 4 is valid and 1 is invalid |
range |
Slider component must have value between range number |
if range: [4,5] , 4 is valid and 6 is invalid |
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component<{}, {}> {
private ticks: object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
private value: number[] = [30, 70];
// sets required property in the FormValidator rules collection
private minOptions: FormValidatorModel = {
rules: {
'min-slider': {
validateHidden: true,
min: [40, "You must select value greater than or equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
private maxOptions: FormValidatorModel = {
rules: {
'max-slider': {
validateHidden: true,
max: [40, "You must select value less than or equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
private valOptions: FormValidatorModel = {
rules: {
'val-slider': {
validateHidden: true,
regex: [/40/, "You must select value equal to 40"]
}
}
};
// sets required property in the FormValidator rules collection
private rangeOptions: FormValidatorModel = {
rules: {
'range-slider': {
validateHidden: true,
range: [40, 80, "You must select values between 40 and 80"]
}
}
};
// sets required property in the FormValidator rules collection
private customOptions: FormValidatorModel = {
rules: {
'custom-slider': {
validateHidden: true,
range: [this.validateRange.bind(this), "You must select values between 40 and 80"]
}
}
};
// Initialize Form validation
private formMinObj: FormValidator;
private formMaxObj: FormValidator;
private formValObj: FormValidator;
private formRangeObj: FormValidator;
private formCustomObj: FormValidator;
public componentDidMount(): void {
this.formMinObj = new FormValidator("#formMinId", this.minOptions);
this.formMaxObj = new FormValidator("#formMaxId", this.maxOptions);
this.formValObj = new FormValidator("#formValId", this.valOptions);
this.formRangeObj = new FormValidator("#formRangeId", this.rangeOptions);
this.formCustomObj = new FormValidator("#formCustomId", this.customOptions);
}
private onMinChanged(args: any): void {
// validate the slider value in the form
this.formMinObj.validate();
}
private onMaxChanged(args: any): void {
// validate the slider value in the form
this.formMaxObj.validate();
}
private onValChanged(args: any): void {
// validate the slider value in the form
this.formValObj.validate();
}
private onRangeChanged(args: any) {
// validate the slider value in the form
this.formRangeObj.validate();
}
private onCustomChanged(args: any) {
// validate the slider value in the form
this.formCustomObj.validate();
}
private SliderCustomObj: SliderComponent;
private validateRange(args: any) {
return (this.SliderCustomObj.value as number[])[0] >= 40 && (this.SliderCustomObj.value as number[])[1] <= 80;
}
render() {
return (
<div id='container'>
<div className="col-lg-12 control-section">
<div className="content-wrapper">
<div className="form-title">
<span>Min</span>
</div>
<form id="formMinId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id='min-slider' name="min-slider" type='MinRange' value={30} ticks={this.ticks}
changed={this.onMinChanged.bind(this)} />
</div>
</div>
</form>
<div className="form-title">
<span>Max</span>
</div>
<form id="formMaxId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id='max-slider' name="max-slider" type='MinRange' value={30} ticks={this.ticks}
changed={this.onMaxChanged.bind(this)} />
</div>
</div>
</form>
<div className="form-title">
<span>Value</span>
</div>
<form id="formValId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id='val-slider' name='val-slider' type='MinRange' value={30} ticks={this.ticks}
changed={this.onValChanged.bind(this)} />
</div>
</div>
</form>
<div className="form-title">
<span>Range</span>
</div>
<form id="formRangeId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id='range-slider' name='range-slider' type='MinRange' value={30} ticks={this.ticks}
changed={this.onRangeChanged.bind(this)} />
</div>
</div>
</form>
<div className="form-title">
<span>Custom</span>
</div>
<form id="formCustomId" className="form-horizontal">
<div className="form-group">
<div className="e-float-input">
<SliderComponent id='custom-slider' name='custom-slider' type='Range' value={this.value}
ticks={this.ticks} changed={this.onCustomChanged.bind(this)}
ref={(slider) => { this.SliderCustomObj = slider }} />
</div>
</div>
</form>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.highcontrast form {
background: #000000
}
/* csslint ignore:start */
.highcontrast label.e-custom-label,
.highcontrast label.e-float-text,
.highcontrast label.salary,
.highcontrast input::placeholder,
.highcontrast .e-float-input label.e-float-text {
color: #fff !important;
line-height: 2.3;
}
/* csslint ignore:end */
.e-error,
.e-float-text {
font-weight: 500;
}
table,
td,
th {
padding: 5px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
form {
border: 1px solid #ccc;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
border-radius: 5px;
background: #f9f9f9;
padding: 23px;
padding-bottom: 20px;
margin: auto;
max-width: 650px;
}
.form-title {
width: 100%;
text-align: center;
padding: 10px;
font-size: 16px;
font-weight: 600;
color: black;
}