@eureca/eureca-ui/src/components/Slider/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { makeStyles } from '@material-ui/core/styles';
import { Slider as MaterialSlider } from '@material-ui/core';

import { colors } from '../../theme/colors';

const useStyles = makeStyles(() => ({
  root: {
    '&$disabled': {
      '& .MuiSlider-track': {
        background: colors.gray4,
        opacity: 1,
      },
      '& .MuiSlider-rail': {
        background: colors.gray4,
        opacity: 1,
      },
      '& .MuiSlider-mark': {
        opacity: 0,
      },
    },
  },
  mark: {
    background: colors.gray3,
  },
  rail: {
    background: colors.gray4,
  },
  thumb: {
    background: colors.green1,
    '&:focus,&:hover': {
      boxShadow: 'none',
    },
  },
  track: {
    background: colors.green1,
  },
  valueLabel: {
    color: colors.green1,
  },
  disabled: {
    '& .MuiSlider-thumb': {
      background: colors.gray3,
      border: `2px solid ${colors.gray5}`,
      top: 9,
      boxSizing: 'content-box',
    },
  },
}));

function Slider({ value, onChange = () => {}, marks = true, ...props }) {
  const classes = useStyles();

  const handleChange = (_e, newValue) => {
    if (typeof onChange === 'function') {
      onChange(newValue);
    }
  };

  return (
    <MaterialSlider
      classes={classes}
      valueLabelDisplay="auto"
      value={value}
      onChange={handleChange}
      marks={marks}
      {...props}
    />
  );
}

Slider.propTypes = {
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
  marks: PropTypes.bool,
  onChange: PropTypes.func,
};

export { Slider };