Material UI Slider + Value Label

Material UI is a set of React components that implement Google's Material Design specification.

Among these really great components is a slider, but it is missing the value label / info bubble the Google design guideline calls for.

This component augments the Material UI Slider component with a value label / info bubble styled to your specifications.

Installation

npm install https://github.com/tariqwest/material-ui-slider-label.git

Usage

Use this with Material UI to add a label bubble to a slider.

./SearchRadiusInput.js

import React from 'react';
import Subheader from 'material-ui/Subheader';
import Slider from 'material-ui-slider-label/Slider';
import { cyan500 } from 'material-ui/styles/colors';

const styles = {
  subheader: {
    textTransform: 'capitalize',
  },
  labelStyleOuter: {
    width: '30px',
    height: '30px',
    borderRadius: '50% 50% 50% 0',
    background: cyan500,
    position: 'absolute',
    transform: 'rotate(-45deg)',
    top: '-40px',
    left: '-9px',
  },
  labelStyleInner: {
    transform: 'rotate(45deg)',
    color: 'white',
    textAlign: 'center',
    position: 'relative',
    top: '3px',
    right: '0px',
    fontSize: '10px',
  },
};

const SearchRadiusInput = ({ radius, onChange }) => (
  <div>
    <Subheader style={styles.subheader}>
      {'Search radius'}
    </Subheader>
    <Slider
      defaultValue={5 / 100}
      min={0}
      max={1}
      step={5 / 100}
      value={radius / 100}
      onChange={onChange}
      label={
        <div style={styles.labelStyleOuter}>
          <div style={styles.labelStyleInner}>
            {radius}
          </div>
        </div>
      }
    />
  </div>
);

export default SearchRadiusInput;

License

This project is licensed under the terms of the MIT license