office-ui-fabric-react/lib-amd/demo/pages/SliderPage/examples/Slider.Basic.Example.tsx.js

Reusable React components for building experiences for Office 365.

define([], function() { return "import * as React from 'react';\r\nimport {\r\n  Slider\r\n} from '../../../../index';\r\nimport './Slider.Basic.Example.scss';\r\n\r\nexport class SliderBasicExample extends React.Component<any, any> {\r\n  constructor() {\r\n    super();\r\n\r\n    this.state = {\r\n      value: 0\r\n    };\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <div className='ms-SliderBasicExample'>\r\n\r\n        <Slider\r\n          label='Basic example:'\r\n          min={ 1 }\r\n          max={ 3 }\r\n          step={ 1 }\r\n          defaultValue={ 2 }\r\n          showValue={ true }\r\n          onChange={ (value) => console.log(value) }\r\n          />\r\n\r\n        <Slider\r\n          label='Disabled example:'\r\n          min={ 50 }\r\n          max={ 500 }\r\n          step={ 50 }\r\n          defaultValue={ 300 }\r\n          showValue={ true }\r\n          disabled={ true }\r\n          />\r\n\r\n        <Slider\r\n          label='Controlled example:'\r\n          max={ 10 }\r\n          value={ this.state.value }\r\n          onChange={ value => this.setState({ value }) }\r\n          showValue={ true }\r\n          />\r\n\r\n      </div>\r\n    );\r\n  }\r\n\r\n}\r\n"; });