The API documentation of the SliderStyled React component. Learn more about the props and the CSS customization points.
+ +## Import + +```js +import SliderStyled from '@material-ui/lab/SliderStyled'; +// or +import { SliderStyled } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + diff --git a/docs/pages/api-docs/slider-unstyled.js b/docs/pages/api-docs/slider-unstyled.js new file mode 100644 index 00000000000000..6558f78ffa2a18 --- /dev/null +++ b/docs/pages/api-docs/slider-unstyled.js @@ -0,0 +1,15 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'api/slider-unstyled'; +const requireRaw = require.context('!raw-loader!./', false, /\/slider-unstyled\.md$/); + +export default function Page({ docs }) { + returnThe API documentation of the SliderUnstyled React component. Learn more about the props and the CSS customization points.
+ +## Import + +```js +import SliderUnstyled from '@material-ui/lab/SliderUnstyled'; +// or +import { SliderUnstyled } from '@material-ui/lab'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + + + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| aria-label | string | | The label of the slider. | +| aria-labelledby | string | | The id of the element containing a label for the slider. | +| aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | +| classes | object | | Override or extend the styles applied to the component. | +| color | 'primary'Sliders allow users to make selections from a range of values.
+ +Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. + +- 📦 [22 kB gzipped](/size-snapshot) (but only +8 kB when used together with other Material-UI components). + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Continuous sliders + +Continuous sliders allow users to select a value along a subjective range. + +{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} + +## Discrete sliders + +Discrete sliders can be adjusted to a specific value by referencing its value indicator. +By order of demos: + +You can generate a mark for each step with `marks={true}`. + +{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} + +### Small steps + +You can change the default step increment. + +{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} + +### Custom marks + +You can have custom marks by providing a rich array to the `marks` prop. + +{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} + +### Restricted values + +You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. + +{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} + +### Label always visible + +You can force the thumb label to be always visible with `valueLabelDisplay="on"`. + +{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.js"}} + +## Range slider + +The slider can be used to set the start and end of a range by supplying an array of values to the `value` prop. + +{{"demo": "pages/components/slider-styled/RangeSlider.js"}} + +## Slider with input field + +In this example an input allows a discrete value to be set. + +{{"demo": "pages/components/slider-styled/InputSlider.js"}} + +## Customized sliders + +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). + +{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} + +## Vertical sliders + +{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} + +## Track + +The track shows the range available for user selection. + +### Removed track + +The track can be turned off with `track={false}`. + +{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} + +### Inverted track + +The track can be inverted with `track="inverted"`. + +{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} + +## Non-linear scale + +You can use the `scale` prop to represent the `value` on a different scale. +For instance, in the following demo, the value _x_ represents the power of _10^x_. + +{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} + +## Unstyled slider + +{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} + +## Accessibility + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) + +The component handles most of the work necessary to make it accessible. +However, you need to make sure that: + +- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop). +- Each thumb has a user-friendly text for its current value. + This is not required if the value matches the semantics of the label. + You can change the name with the `getAriaValueText` or `aria-valuetext` prop. diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js new file mode 100644 index 00000000000000..3e78bbc3f11371 --- /dev/null +++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import styled from '@emotion/styled'; +import { ThemeProvider } from 'emotion-theming'; + +const Root = styled('div')((props) => ({ + width: '100%', + marginTop: props.theme?.spacing(4), + marginRight: props.theme?.spacing(2), +})); + +const AffectedText = styled('div')` + text-align: left; +`; + +const UnaffectedText = styled('div')` + /* @noflip */ + text-align: left; +`; + +const theme = createMuiTheme(); + +export default function RtlOptOut() { + return ( + {
+ props: P & {
+ /**
+ * The label of the slider.
+ */
+ 'aria-label'?: string;
+ /**
+ * The id of the element containing a label for the slider.
+ */
+ 'aria-labelledby'?: string;
+ /**
+ * A string value that provides a user-friendly name for the current value of the slider.
+ */
+ 'aria-valuetext'?: string;
+ /**
+ * Override or extend the styles applied to the component.
+ */
+ classes?: {};
+ /**
+ * The color of the component. It supports those theme colors that make sense for this component.
+ * @default 'primary'
+ */
+ color?: 'primary' | 'secondary';
+ /**
+ * The components used for each slot inside the Slider.
+ * Either a string to use a HTML element or a component.
+ */
+ components?: {
+ Root?: React.ElementType;
+ Track?: React.ElementType;
+ Rail?: React.ElementType;
+ Thumb?: React.ElementType;
+ Mark?: React.ElementType;
+ MarkLabel?: React.ElementType;
+ ValueLabel?: React.ElementType;
+ };
+ /**
+ * The props used for each slot inside the Slider.
+ */
+ componentsProps?: {
+ root?: {
+ styleProps?: Omit {
* Demos:
*
* - [Slider](https://material-ui.com/components/slider/)
+ * - [Slider Styled](https://material-ui.com/components/slider-styled/)
*
* API:
*
diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts
index 6307f05991a94b..8006e6928cbee4 100644
--- a/packages/material-ui/src/styles/index.d.ts
+++ b/packages/material-ui/src/styles/index.d.ts
@@ -15,6 +15,7 @@ export { default as responsiveFontSizes } from './responsiveFontSizes';
export { ComponentsPropsList } from './props';
export { Duration, Easing, Transitions, TransitionsOptions, duration, easing } from './transitions';
export { default as useTheme } from './useTheme';
+export { default as useThemeProps } from './useThemeProps';
export {
default as withStyles,
WithStyles,
@@ -23,6 +24,7 @@ export {
StyledComponentProps,
} from './withStyles';
export { default as withTheme, WithTheme } from './withTheme';
+export { default as muiStyled } from './muiStyled';
export { default as styled, ComponentCreator, StyledProps } from './styled';
export {
createGenerateClassName,
diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js
index fa533156c53f3b..0796b3f735aff8 100644
--- a/packages/material-ui/src/styles/index.js
+++ b/packages/material-ui/src/styles/index.js
@@ -9,8 +9,10 @@ export { default as responsiveFontSizes } from './responsiveFontSizes';
export { default as styled } from './styled';
export { duration, easing } from './transitions';
export { default as useTheme } from './useTheme';
+export { default as useThemeProps } from './useThemeProps';
export { default as withStyles } from './withStyles';
export { default as withTheme } from './withTheme';
+export { default as muiStyled } from './muiStyled';
export {
createGenerateClassName,
jssPreset,
diff --git a/packages/material-ui/src/styles/muiStyled.d.ts b/packages/material-ui/src/styles/muiStyled.d.ts
new file mode 100644
index 00000000000000..bd9aca8a85a51e
--- /dev/null
+++ b/packages/material-ui/src/styles/muiStyled.d.ts
@@ -0,0 +1,208 @@
+import * as React from 'react';
+import * as CSS from 'csstype';
+
+export interface SerializedStyles {
+ name: string;
+ styles: string;
+ map?: string;
+ next?: SerializedStyles;
+}
+
+export type CSSProperties = CSS.PropertiesFallback