Search results

Format in React Range Slider component

29 Nov 2022 / 3 minutes to read

The format feature used to customize the units of Slider values to desired format. The formatted values will also be applied to the ARIA attributes of the slider. There are two ways of achieving formatting in slider.

  • Use the format API of slider which utilizes our Internationalization to format values.
  • Customize using the events namely renderingTicks and tooltipChange.
Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        this.tooltip = { isVisible: true, format: "C2" };
        this.value = 30;
        // Slider ticks customization
        this.ticks = {
            placement: "After",
            format: "C2",
            largeStep: 20,
            smallStep: 10,
            showSmallTicks: true
        };
    }
    render() {
        return (<div id="container">
    <div className="wrap">
      <SliderComponent id="slider" min={0} max={100} value={this.value} tooltip={this.tooltip} ticks={this.ticks}/>
    </div>
  </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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>
Copied to clipboard
.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;
}
Copied to clipboard
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<{}, {}> {
  public tooltip = { isVisible: true, format: "C2" };
  public value = 30;
  // Slider ticks customization
  public ticks: TicksDataModel = {
placement: "After",
format: "C2",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
  };
  render() {
return (
  <div id="container">
    <div className="wrap">
      <SliderComponent
        id="slider"
        min={0}
        max={100}
        value={this.value}
        tooltip={this.tooltip}
        ticks={this.ticks}
      />
    </div>
  </div>
);
  }
}

ReactDOM.render(<App />, document.getElementById('element'));

Using format API

In this method, we have different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and # specifiers. In this below example we have formatted the ticks and tooltip values into percentage.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        this.tooltip = {
            placement: "Before",
            isVisible: true,
            showOn: "Always",
            format: "P0"
        };
        this.value = 0.3;
        // Slider ticks customization
        this.ticks = {
            placement: "After",
            largeStep: 0.2,
            smallStep: 0.1,
            showSmallTicks: true,
            format: "P0"
        };
    }
    render() {
        return (<div id="container">
    <div className="wrap">
      <SliderComponent id="slider" min={0} max={1} step={0.01} value={this.value} tooltip={this.tooltip} ticks={this.ticks}/>
    </div>
  </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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>
Copied to clipboard
.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;
}
Copied to clipboard
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<{}, {}> {
  public tooltip: TooltipDataModel = {
placement: "Before",
isVisible: true,
showOn: "Always",
format: "P0"
  };
  public value = 0.3;
  // Slider ticks customization
  public ticks: TicksDataModel = {
placement: "After",
largeStep: 0.2,
smallStep: 0.1,
showSmallTicks: true,
format: "P0"
  };
  render() {
return (
  <div id="container">
    <div className="wrap">
      <SliderComponent
        id="slider"
        min={0}
        max={1}
        step={0.01}
        value={this.value}
        tooltip={this.tooltip}
        ticks={this.ticks}
      />
    </div>
  </div>
);
  }
}

ReactDOM.render(<App />, document.getElementById('element'));

Using Events

In this method, we will be retrieving the values from the slider events then process them to desired formatted the values. In this sample we have customized the ticks values into weekdays as one formatting and tooltip values into day of the week as another formatting.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        this.tooltip = { placement: "Before", isVisible: true };
        this.value = 2;
        // Slider ticks customization
        this.ticks = { placement: "After", largeStep: 1 };
    }
    renderingTicksHandler(args) {
        // Weekdays Array
        let daysArr = [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thrusday",
            "Friday",
            "Saturday"
        ];
        // Customizing each ticks text into weeksdays
        args.text = daysArr[parseFloat(args.value.toString())];
    }
    tooltipChangeHandler(args) {
        // Customizing tooltip to display the Day (in numeric) of the week
        args.text = "Day " + (Number(args.value) + 1).toString();
    }
    render() {
        return (<div id="container">
    <div className="wrap">
      <SliderComponent id="slider" min={0} max={6} step={1} value={this.value} tooltip={this.tooltip} ticks={this.ticks} tooltipChange={this.tooltipChangeHandler.bind(this)} renderingTicks={this.renderingTicksHandler.bind(this)}/>
    </div>
  </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/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>
Copied to clipboard
.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;
}
Copied to clipboard
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<{}, {}> {
  public tooltip: TooltipDataModel = { placement: "Before", isVisible: true };
  public value = 2;
  // Slider ticks customization
  public ticks: TicksDataModel = { placement: "After", largeStep: 1 };

  renderingTicksHandler(args: SliderTickEventArgs) {
// Weekdays Array
let daysArr: string[] = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thrusday",
  "Friday",
  "Saturday"
];
// Customizing each ticks text into weeksdays
args.text = daysArr[parseFloat(args.value.toString())];
  }

  tooltipChangeHandler(args: SliderTooltipEventArgs) {
// Customizing tooltip to display the Day (in numeric) of the week
args.text = "Day " + (Number(args.value) + 1).toString();
  }

  render() {
return (
  <div id="container">
    <div className="wrap">
      <SliderComponent
        id="slider"
        min={0}
        max={6}
        step={1}
        value={this.value}
        tooltip={this.tooltip}
        ticks={this.ticks}
        tooltipChange={this.tooltipChangeHandler.bind(this) as any}
        renderingTicks={this.renderingTicksHandler.bind(this) as any}
      />
    </div>
  </div>
);
  }
}

ReactDOM.render(<App />, document.getElementById('element'));