Example from https://react-md.dev/packages/form/slider-demos#discrete-sliders

Form Example - Discrete Sliders

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Form Example - Discrete Sliders</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import { RangeSlider, Slider, useRangeSlider, useSlider } from "@react-md/form";
import { useId } from "./IdProvider";
import type { ReactElement } from "react";
import SlidersContainer from "./SlidersContainer";

export default function Demo(): ReactElement | null {
  const [, controls1] = useSlider();
  const [, controls2] = useRangeSlider();
  const [, controls3] = useSlider();
  const [, controls4] = useRangeSlider();
  return (
    <>
      <SlidersContainer>
        <Slider baseId={useId()} {...controls1} label="Horizontal" discrete />
        <RangeSlider
          baseId={useId()}
          {...controls2}
          label="Horizontal"
          discrete
        />
      </SlidersContainer>
      <SlidersContainer vertical>
        <Slider
          baseId={useId()}
          {...controls3}
          label="Vertical"
          discrete
          vertical
        />
        <RangeSlider
          baseId={useId()}
          {...controls4}
          label="Vertical"
          discrete
          vertical
        />
      </SlidersContainer>
    </>
  );
}


import type { ReactNode, ReactElement } from "react";
import { createContext, useContext, useMemo } from "react";
import createIdGenerator from "./createIdGenerator";

type IdGenerator = ReturnType<typeof createIdGenerator>;

const context = createContext<IdGenerator>(createIdGenerator("autoid"));
const { Provider } = context;

export function useId(id?: string): string {
  const generator = useContext(context);

  return useMemo(() => {
    if (id) {
      return id;
    }

    return generator();
  }, [id, generator]);
}

export interface IdProviderProps {
  prefix?: string;
  children: ReactNode;
}

export function IdProvider({
  children,
  prefix = "autoid",
}: IdProviderProps): ReactElement {
  const value = useMemo(() => createIdGenerator(prefix), [prefix]);

  return <Provider value={value}>{children}</Provider>;
}


.horizontal {
  margin: 1rem 0;
}

.vertical {
  display: inline-flex;
  flex-direction: column;
  margin: 1rem;
}

.label {
  margin-bottom: 0.5rem;
}


import type { ReactElement, ReactNode } from "react";
import { Children, cloneElement, isValidElement } from "react";

import styles from "./SlidersContainer.module.scss";

export interface SlidersContainerProps {
  vertical?: boolean;
  children: ReactNode;
}

export default function SlidersContainer({
  vertical = false,
  children,
}: SlidersContainerProps): ReactElement | null {
  return (
    <>
      {Children.map(children, (slider) => {
        if (!isValidElement(slider)) {
          return slider;
        }

        if (vertical) {
          // Note: vertical sliders to not "natively" support labels without
          // custom styles.
          return (
            <span className={styles.vertical}>
              {cloneElement(slider, {
                labelProps: { className: styles.label },
              })}
            </span>
          );
        }

        return cloneElement(slider, {
          className: styles.horizontal,
        });
      })}
    </>
  );
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


/**
 * An extremely simplified uuid function that is scoped with a specific prefix.
 * This will just always increment the total count at the end of the prefix.
 *
 * ```ts
 * const uuid = createIdGenerator("my-custom-prefix");
 *
 * uuid(); // my-custom-prefix-0
 * uuid(); // my-custom-prefix-1
 * uuid(); // my-custom-prefix-2
 * ```
 *
 * @param prefix - The string prefix to use
 * @returns a function to call to generate a "uuid"
 */
export default function createIdGenerator(prefix: string): () => string {
  const generator = (function* idGenerator() {
    let index = 0;
    while (true) {
      yield `${prefix}-${index}`;
      index += 1;
    }
  })();

  return (): string => generator.next().value;
}


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
