How to use the scale prop to represent the value on a different scale in Material UI?

In this article, we will explore how to utilize the "scale" prop in Material UI to represent values on a scale.

The "scale" prop in Material UI's Slider component enables you to map the range of values of the slider onto a scale. The usage of this property is very simple and easy to implement. Also, the prop is useful when there is a need to display and manipulate values on a scale that differs from the default linear scale of the slider.

If we talk about the value it accepts, then it acts as a function that takes the value of the slider as an argument and returns its value on your desired scale. Later, in this article, we are going to see its different implementation in the React MUI.

Slider API

• <Slider> − This API is used to create the slider component, allowing the users to make selections in a different range of items in React MUI.

Props

• aria-label − This prop is used to add the slider label.

• aria-labelledby − This prop is used to add id of the element having slider label.

• aria-valuetext − This prop is used to add a name to the value of the slider.

• classes − This prop is used to override or add styles to component.

• color − This prop is used to add different colors to slider component.

• components − This prop is used to add components for each slider slot.

• componentsProps − This prop is used to add props for slot components.

• defaultValue − This prop is used to add defaut value.

• disabled − This prop is used to disable the slider component.

• disableSwap − This prop allows you to not swap the slider when moving pointer over a thumb while dragging another thumb.

• getAriaLabel − This prop is used to add a function returning the name of the slider label.

• getAriaValueText − This prop is used to add a function returning the current value of the slider label.

• marks − This prop is used to add predetermined value to the slider.

• max − This prop is used to add the max value to a slider.

• min − This prop is used to add the min value to a slider.

• name − This prop is used to add the name of hidden input.

• onChange − This prop is used to add a callback function when slider value is triggered.

• orientation − This prop is used to change slider component orientation.

• scale − This prop is used to change slider scale.

• size − This prop is used to change the size of the slider.

• slotProps − This prop is used to add different props inside the slider.

• slots − This prop is used to add componen inside the slider.

• step − This prop is used to add the steps in the sliders.

• sx − This prop is used to add styles in Material UI.

• track − This prop is used to add different tracks to a slider.

• value − This prop is used to add a value to the slider.

• valueLabelDisplay − This prop is used to control the displayed value of label.

Steps to use Scale prop

Below are the steps for using the scale prop in Slider component in Material UI, with their respective syntaxes −

Step 1: Create a react application

Before we move further to create sliders, we must have a React application. To create a new React app, run the below commands in your terminal −

npx create react app sliderproject

Once the project is created, navigate to its directory by running −

cd sliderproject

Step 2: Install the material UI

Once you have created the react app, it's time to install the Material UI into the react application. To install MUI, run the following command −

npm install @mui/material @emotion/react @emotion/styled

Step 3: Import and define the slider component

Now, let’s import and define the slider component along with the scale prop in the main App component.

import Slider from "@mui/material/Slider"

<Slider
   value={val}
   onChange={customFunction}
   scale={customScaleFunction}
/>

Step 4: Run the project

To run the react MUI application, run the below command in the terminal −

npm run start

That’s all about the usage of scale prop in slider component. Now, let’s see some examples of different approaches.

Example

The given example is very basic, using the scale prop to represent the value on a different scale. Here, the value the user selects gets converted to its cube and displayed on the label.

import React from "react";
import Slider from "@mui/material/Slider"
import { Typography } from "@mui/material";
import { useState } from "react";

const myCustomScale = (val) => 
Math.pow(val, 3); 

const App = () => {
   const [val, setVal] = useState();
   const handleSliderInput = (e, newValue) => {
      setVal(newValue);
   };
   return (
      <div style={{padding: 40,width: '50%'}}>
         <Typography id="custom-scale-slider" gutterBottom>
            Tutorialspoint
         </Typography>
         <Slider
            value={val}
            step={2}
            min={5}
            max={20}
            scale={myCustomScale}
            onChange={handleSliderInput}
            valueLabelDisplay="auto"
            aria-labelledby="custom-scale-slider"
         />
      </div>
   );
};

export default App;

Output

Example

This example demonstrates the use of the scale prop for converting the different storage values. Here, when the user selects any value from the slider, the selected value gets converted into different storage types by multiplying the selected value by 2.

import React from "react";
import Slider from "@mui/material/Slider"
import { Typography } from "@mui/material";

function customLabel(val) {
   const units = ['KB', 'MB'];
   let unIdx = 0;
   let customVal = val;

   while (customVal >= 512 && unIdx < units.length - 1) {
      unIdx += 1;
      customVal /= 512;
   }

   return `${customVal} ${units[unIdx]}`;
}

const App = () => {
   function customVal(val) {
      return 2 ** val;
   }

   const [val, setVal] = React.useState(30);
   const handleSliderInput = (e, newValue) => {
      if (typeof newValue === 'number') {
         setVal(newValue);
      }
   };
   return (
      <div style={{padding: 40,width: '50%'}}>
         <Typography id="custom-scaled-slider" gutterBottom>
            Increase memory: {customLabel(customVal(val))}
         </Typography>
         <Slider
            value={val}
            step={1}
            min={5}
            max={20}
            scale={customVal}
            onChange={handleSliderInput}
            valueLabelFormat={customLabel}
            aria-labelledby="custom-scaled-slider"
            valueLabelDisplay="on"
         />
      </div>
   );
};

export default App;

Output

Example

This example illustrates the process of utilizing the scale prop to depict values on a scale. We have created a converter that converts Celsius to Fahrenheit and showcases the result on a scale. In this scenario, the scale prop plays a role in converting temperatures into units while also allowing users to modify and observe the currently updated value of the selected value through the slider.

import React from "react";
import Slider from "@mui/material/Slider"
import { Typography } from "@mui/material";
import { useState } from "react";

const ctofconverter = (cel) => (cel * 9/5) + 32;

const App = () => {
   const [val, setVal] = useState(30);
   const handleTempConversion = (event, newValue) => {
      setVal(newValue);
   };

   const fah = ctofconverter(val);
   return (
      <div style={{padding: 40,width: '50%'}}>
         <Typography gutterBottom>
            Temperature in Celsius {val}°C
         </Typography>
         <Slider
            value={val}
            onChange={handleTempConversion}
            scale={ctofconverter}
            aria-labelledby="custom-scaled-slider"
            min={-20}
            max={40}
            color="secondary"
            valueLabelDisplay="on"
         />
         <Typography gutterBottom>
            Temperature in Fahrenheit {fah}°F
         </Typography>
      </div>
   );
};

export default App;

Output

Conslusion

In conclusion, the article covers how we can use the scale prop to represent the value on a different scale with its complete syntax, steps, and examples using React MUI. We have learned how the scale prop helps in effectively representing the values on a different scale without actually using any third-party libraries or modules in Material UI.