Format in React Range slider component

30 Jan 202313 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.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let tooltip = { isVisible: true, format: "C2" };
    let value = 30;
    // Slider ticks customization
    let ticks = {
        placement: "After",
        format: "C2",
        largeStep: 20,
        smallStep: 10,
        showSmallTicks: true
    };
    return (<div id="container">
      <div className="wrap">
        <SliderComponent id="slider" min={0} max={100} value={value} tooltip={tooltip} ticks={ticks}/>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let tooltip = { isVisible: true, format: "C2" };
  let value = 30;
  // Slider ticks customization
  let ticks: TicksDataModel = {
    placement: "After",
    format: "C2",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };

  return (
    <div id="container">
      <div className="wrap">
        <SliderComponent
          id="slider"
          min={0}
          max={100}
          value={value}
          tooltip={tooltip}
          ticks={ticks}
        />
      </div>
    </div>
  );
}
export default App;
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.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let tooltip = {
        placement: "Before",
        isVisible: true,
        showOn: "Always",
        format: "P0"
    };
    let value = 0.3;
    // Slider ticks customization
    let ticks = {
        placement: "After",
        largeStep: 0.2,
        smallStep: 0.1,
        showSmallTicks: true,
        format: "P0"
    };
    return (<div id="container">
      <div className="wrap">
        <SliderComponent id="slider" min={0} max={1} step={0.01} value={value} tooltip={tooltip} ticks={ticks}/>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let tooltip: TooltipDataModel = {
    placement: "Before",
    isVisible: true,
    showOn: "Always",
    format: "P0"
  };
  let value = 0.3;
  // Slider ticks customization
  let ticks: TicksDataModel = {
    placement: "After",
    largeStep: 0.2,
    smallStep: 0.1,
    showSmallTicks: true,
    format: "P0"
  };

  return (
    <div id="container">
      <div className="wrap">
        <SliderComponent
          id="slider"
          min={0}
          max={1}
          step={0.01}
          value={value}
          tooltip={tooltip}
          ticks={ticks}
        />
      </div>
    </div>
  );
}
export default App;
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.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let tooltip = { placement: "Before", isVisible: true };
    let value = 2;
    // Slider ticks customization
    let ticks = { placement: "After", largeStep: 1 };
    function 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())];
    }
    function tooltipChangeHandler(args) {
        // Customizing tooltip to display the Day (in numeric) of the week
        args.text = "Day " + (Number(args.value) + 1).toString();
    }
    return (<div id="container">
      <div className="wrap">
        <SliderComponent id="slider" min={0} max={6} step={1} value={value} tooltip={tooltip} ticks={ticks} tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)}/>
      </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let tooltip: TooltipDataModel = { placement: "Before", isVisible: true };
  let value = 2;
  // Slider ticks customization
  let ticks: TicksDataModel = { placement: "After", largeStep: 1 };

  function 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())];
  }

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

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