Material UI Base Fiddle

by Fallain

HTML

<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container"></div>

Babel + JSX

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {withStyles} from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import Badge from '@material-ui/core/Badge';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import NotificationsIcon from '@material-ui/icons/Notifications';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import TrendingDownIcon from '@material-ui/icons/TrendingDown';
import TrendingUpIcon from '@material-ui/icons/TrendingDown';
import TrendingFlatIcon from '@material-ui/icons/TrendingFlat';
import HalfSunburstChart from "./Dashboard/HalfSunburstChart";
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';

const { RaisedButton, MuiThemeProvider, getMuiTheme, Slider } = MaterialUI;

class SliderExampleControlled extends React.Component {

  state = {
    min: 0,
    max: 100,
    value: 0,
  }

  render() {
    console.log(this.state);
    return (
      <div style={{width: '50%', margin: '0 auto'}}>
        <Slider
          key={'change-with-' + this.state.min + '-and-' + this.state.max}
          step={1}
          {...this.state}
          onChange={(event, value) => this.setState({value})}
        />
        <RaisedButton label="change min" onClick={() => this.setState({min: this.state.min-30, value: this.state.value-30})}/>
        <p>{JSON.stringify(this.state)}</p>
      </div>
    );
 ...