Skip to content

Commit 147fade

Browse files
kladdadkradio3
kladdad
authored and
kradio3
committed
feat(Slider): create new component (#47)
Uses the MDC foundation classes, since othewise there is no reasonable way to implement the slider behavior that is consistent with MDC.
1 parent 060e456 commit 147fade

File tree

10 files changed

+376
-4
lines changed

10 files changed

+376
-4
lines changed

‎docs/.gatsby-context.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
// This file is auto-written and used by Gatsby to require
55
// files from your pages directory.
66
module.exports = function (callback) {
7-
var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
8-
if (module.hot) {
7+
var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/ // eslint-disable-line
8+
);if (module.hot) {
99
module.hot.accept(context.id, function () {
10-
context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
11-
return callback(context);
10+
context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/ // eslint-disable-line
11+
);return callback(context);
1212
});
1313
}
1414
return callback(context);

‎docs/config.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ linkPrefix = "/react-mdc-web"
4444
[[components]]
4545
name = "Radio"
4646
path = "/components/radio/"
47+
[[components]]
48+
name = "Slider"
49+
path = "/components/slider/"
4750
[[components]]
4851
name = "Snackbar"
4952
path = "/components/snackbar/"

‎docs/pages/components/slider/_Default.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, {PropTypes} from 'react'
2+
import Slider from '../../../../src/Slider'
3+
import FormField from '../../../../src/FormField'
4+
import Grid from '../../../../src/Grid/Grid'
5+
import Cell from '../../../../src/Grid/Cell'
6+
import Subheading1 from '../../../../src/Typography/Subheading1'
7+
8+
export default class Default extends React.PureComponent {
9+
10+
constructor(props){
11+
super(props);
12+
this.state={value:50,inputValue:50};
13+
}
14+
15+
render () {
16+
return (
17+
<Grid>
18+
<Cell col={12}>
19+
<Slider
20+
value={this.state.value}
21+
onChange={(value)=>{
22+
this.setState({value})
23+
}}
24+
onInput={(inputValue)=>{
25+
this.setState({inputValue})
26+
}}
27+
/>
28+
</Cell>
29+
<Cell col={12}>
30+
<Subheading1>{`Current value: ${this.state.value}`}</Subheading1>
31+
<Subheading1>{`Input value: ${this.state.inputValue}`}</Subheading1>
32+
</Cell>
33+
</Grid>
34+
)
35+
}
36+
}
37+

‎docs/pages/components/slider/_Disabled.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, {PropTypes} from 'react'
2+
import Slider from '../../../../src/Slider'
3+
import FormField from '../../../../src/FormField'
4+
import Grid from '../../../../src/Grid/Grid'
5+
import Cell from '../../../../src/Grid/Cell'
6+
import Subheading1 from '../../../../src/Typography/Subheading1'
7+
8+
export default class Disabled extends React.PureComponent {
9+
10+
constructor(props){
11+
super(props);
12+
this.state={value:50};
13+
}
14+
15+
render () {
16+
return (
17+
<Grid>
18+
<Cell col={12}>
19+
<Slider
20+
value={this.state.value}
21+
disabled
22+
/>
23+
</Cell>
24+
</Grid>
25+
)
26+
}
27+
}
28+

‎docs/pages/components/slider/_Discrete.jsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, {PropTypes} from 'react'
2+
import Slider from '../../../../src/Slider'
3+
import FormField from '../../../../src/FormField'
4+
import Grid from '../../../../src/Grid/Grid'
5+
import Cell from '../../../../src/Grid/Cell'
6+
import Subheading1 from '../../../../src/Typography/Subheading1'
7+
8+
export default class Discrete extends React.PureComponent {
9+
10+
constructor(props){
11+
super(props);
12+
this.state={value:0,inputValue:0};
13+
}
14+
15+
render () {
16+
return (
17+
<Grid>
18+
<Cell col={12}>
19+
<Slider
20+
value={this.state.value}
21+
min={-50}
22+
max={50}
23+
step={5}
24+
discrete
25+
onChange={(value)=>{
26+
this.setState({value})
27+
}}
28+
onInput={(inputValue)=>{
29+
this.setState({inputValue})
30+
}}
31+
/>
32+
</Cell>
33+
<Cell col={12}>
34+
<Subheading1>{`Current value: ${this.state.value}`}</Subheading1>
35+
<Subheading1>{`Input value: ${this.state.inputValue}`}</Subheading1>
36+
</Cell>
37+
</Grid>
38+
)
39+
}
40+
}
41+

‎docs/pages/components/slider/_DiscreteWithMarkers.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, {PropTypes} from 'react'
2+
import Slider from '../../../../src/Slider'
3+
import FormField from '../../../../src/FormField'
4+
import Grid from '../../../../src/Grid/Grid'
5+
import Cell from '../../../../src/Grid/Cell'
6+
import Subheading1 from '../../../../src/Typography/Subheading1'
7+
8+
export default class Discrete extends React.PureComponent {
9+
10+
constructor(props){
11+
super(props);
12+
this.state={value:0,inputValue:0};
13+
}
14+
15+
render () {
16+
return (
17+
<Grid>
18+
<Cell col={12}>
19+
<Slider
20+
value={this.state.value}
21+
min={-50}
22+
max={50}
23+
step={5}
24+
discrete
25+
showMarkers
26+
onChange={(value)=>{
27+
this.setState({value})
28+
}}
29+
onInput={(inputValue)=>{
30+
this.setState({inputValue})
31+
}}
32+
/>
33+
</Cell>
34+
<Cell col={12}>
35+
<Subheading1>{`Current value: ${this.state.value}`}</Subheading1>
36+
<Subheading1>{`Input value: ${this.state.inputValue}`}</Subheading1>
37+
</Cell>
38+
</Grid>
39+
)
40+
}
41+
}
42+

‎docs/pages/components/slider/_template.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, {PropTypes} from 'react'
2+
import ReactDOM from 'react-dom'
3+
import Default from './_Default'
4+
import Disabled from './_Disabled'
5+
import Discrete from './_Discrete'
6+
import DiscreteWithMarkers from './_DiscreteWithMarkers'
7+
8+
export default class Template extends React.PureComponent {
9+
10+
static propTypes = {
11+
children: PropTypes.node,
12+
}
13+
14+
componentDidMount() {
15+
const defaultContainer = document.getElementById("default-slider");
16+
ReactDOM.render(<Default/>, defaultContainer);
17+
const disabledContainer = document.getElementById("disabled-slider");
18+
ReactDOM.render(<Disabled/>, disabledContainer);
19+
const discreteContainer = document.getElementById("discrete-slider");
20+
ReactDOM.render(<Discrete/>, discreteContainer);
21+
const discreteWithMarkersContainer = document.getElementById("discrete-with-markers-slider");
22+
ReactDOM.render(<DiscreteWithMarkers/>, discreteWithMarkersContainer);
23+
}
24+
25+
render () {
26+
return (
27+
<div>
28+
{this.props.children}
29+
</div>
30+
)
31+
}
32+
}
33+

‎docs/pages/components/slider/index.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: "Slider"
3+
---
4+
### Continuous
5+
```react-snippet
6+
default-slider
7+
```
8+
Slider with default setting: continuous with default min and max
9+
```jsx
10+
<FormField id="continous-slider">
11+
<Slider
12+
value={this.state.value}
13+
onChange={(value)=>{
14+
this.setState({value})
15+
}}
16+
onInput={(inputValue)=>{
17+
this.setState({inputValue})
18+
}}
19+
/>
20+
</FormField>
21+
```
22+
23+
### Disabled
24+
```react-snippet
25+
disabled-slider
26+
```
27+
Use ```disabled``` property to disable slider
28+
```jsx
29+
<FormField id="disabled-slider">
30+
<Slider
31+
value={this.state.value}
32+
disabled
33+
/>
34+
/>
35+
</FormField>
36+
```
37+
38+
### Discrete Slider
39+
```react-snippet
40+
discrete-slider
41+
```
42+
Use the ```discrete``` and ```step``` to create a discrete slider.
43+
```jsx
44+
<FormField id="discrete-slider">
45+
<Slider
46+
value={this.state.value}
47+
min={-50}
48+
max={50}
49+
step={5}
50+
discrete
51+
onChange={(value)=>{
52+
this.setState({value})
53+
}}
54+
onInput={(inputValue)=>{
55+
this.setState({inputValue})
56+
}}
57+
/>
58+
/>
59+
</FormField>
60+
```
61+
62+
63+
### Discrete Slider with Markers
64+
```react-snippet
65+
discrete-with-markers-slider
66+
```
67+
Use ```showMarkers``` property to show markers for discrete slider
68+
```jsx
69+
<FormField id="discrete-with-markers-slider">
70+
<Slider
71+
value={this.state.value}
72+
min={-50}
73+
max={50}
74+
step={5}
75+
discrete
76+
showMarkers
77+
onChange={(value)=>{
78+
this.setState({value})
79+
}}
80+
onInput={(inputValue)=>{
81+
this.setState({inputValue})
82+
}}
83+
/>
84+
/>
85+
</FormField>
86+
```

0 commit comments

Comments
 (0)