diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index 2d27ecec..fb38d85c 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -8,6 +8,7 @@ class ProgressBar extends Component {
static propTypes = {
buffer: PropTypes.number,
className: PropTypes.string,
+ disabled: PropTypes.bool,
max: PropTypes.number,
min: PropTypes.number,
mode: PropTypes.oneOf(['determinate', 'indeterminate']),
@@ -79,7 +80,7 @@ class ProgressBar extends Component {
}
render () {
- const { className, max, min, mode, multicolor, type, theme, value } = this.props;
+ const { className, disabled, max, min, mode, multicolor, type, theme, value } = this.props;
const _className = classnames(theme[type], {
[theme[mode]]: mode,
[theme.multicolor]: multicolor
@@ -87,6 +88,7 @@ class ProgressBar extends Component {
return (
{
class Slider extends Component {
static propTypes = {
className: PropTypes.string,
+ disabled: PropTypes.bool,
editable: PropTypes.bool,
max: PropTypes.number,
min: PropTypes.number,
@@ -255,6 +256,7 @@ const factory = (ProgressBar, Input) => {
const knobStyles = {left: `${this.knobOffset()}%`};
const className = classnames(theme.slider, {
[theme.editable]: this.props.editable,
+ [theme.disabled]: this.props.disabled,
[theme.pinned]: this.props.pinned,
[theme.pressed]: this.state.pressed,
[theme.ring]: this.props.value === this.props.min
@@ -263,6 +265,7 @@ const factory = (ProgressBar, Input) => {
return (
{
{
@@ -27,6 +28,8 @@ class SliderTest extends React.Component {
Pinned and with snaps
+ Disabled
+
);
}
@@ -40,6 +43,7 @@ This component can be styled by context providing a theme with the key `RTSlider
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
+| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `editable` | `Boolean` | `false` | If true, an input is shown and the user can set the slider from keyboard value.|
| `max` | `Number` | `100` | Maximum value permitted.|
| `min` | `Number` | `0` | Minimum value permitted.|
diff --git a/components/slider/theme.scss b/components/slider/theme.scss
index bf346815..310e8009 100644
--- a/components/slider/theme.scss
+++ b/components/slider/theme.scss
@@ -111,6 +111,13 @@
border-radius: 50%;
opacity: .26;
}
+ &[disabled] {
+ pointer-events: none;
+ cursor: auto;
+ .innerknob {
+ background-color: $slider-disabled-color;
+ }
+ }
&.editable {
display: flex;
flex-direction: row;
diff --git a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
index 0ed4e9fa..c5fe1807 100644
--- a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
@@ -43,6 +43,8 @@ class ProgressBarTest extends React.Component {
Circular
+ Disabled
+
);
}
diff --git a/docs/app/components/layout/main/modules/examples/slider_example_1.txt b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
index c39c9342..0803c7b0 100644
--- a/docs/app/components/layout/main/modules/examples/slider_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
@@ -1,7 +1,8 @@
class SliderTest extends React.Component {
state = {
slider2: 5,
- slider3: 1
+ slider3: 1,
+ slider4: 3
};
handleChange = (slider, value) => {
@@ -19,6 +20,8 @@ class SliderTest extends React.Component {
Pinned and with snaps
+ Disabled
+
);
}
diff --git a/spec/components/slider.js b/spec/components/slider.js
index 43bcb5e7..f0b5a04b 100644
--- a/spec/components/slider.js
+++ b/spec/components/slider.js
@@ -4,7 +4,8 @@ import Slider from '../../components/slider';
class SliderTest extends React.Component {
state = {
slider2: 5,
- slider3: 1
+ slider3: 1,
+ slider4: 3
};
handleChange = (slider, value) => {
@@ -21,6 +22,8 @@ class SliderTest extends React.Component {
Pinned and with snaps
+ Disabled
+
);
}