Slider

Overview

Slider is a graphical control element with which a user may set a value by moving an indicator, usually horizontally.

Please refer to this for more information: https://mui.com/material-ui/react-slider/.

Import

CODE

import { Slider } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
Default Style	Color: None Orientation: None	The Default Style of the created component includes Color, Orientation.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Type: None Size Unit: Px	The component Size includes Type, Width, Height with many selectable Size Units.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Value		The component Value Includes Value, DefaultValue, Max, Min.
General	Disabled: False Visibility: None Opacity: 100%	The component General includes Disabled, Visibility, Opacity, Color, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

 <Slider
              id="Slider1"
              color="primary"
              orientation="horizontal"
          sx={{':focus': {'margin': '15px 15px 20px 20px','padding': '15px 15px 20px 20px',
              'position': 'fixed','top': '15px','right': '15px','bottom': '20px','left': '20px',
              'visibility': 'hidden','opacity': 0.5,
              'color': '#ff0303ff',
              'backgroundColor': '#000000ff',},}}
               value={150}
               defaultValue={100}
               max={50}
               min={200}
               disabled={true}>
</Slider>