diff --git a/README.md b/README.md
index 756ce45..98b0739 100644
--- a/README.md
+++ b/README.md
@@ -142,6 +142,12 @@ React.render(, container);
'' |
Set the animation for tooltip if it shows. |
+
+ | withDots |
+ bool |
+ false |
+ For linear slider, when the `step` value is greater than 1, you can set the `withDots` to `true` if you want to render the slider bar with dots. |
+
diff --git a/assets/index.less b/assets/index.less
index 4762927..56333a5 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -121,13 +121,13 @@
background-color: @disabledColor;
}
- .@{prefixClass}-handle {
+ .@{prefixClass}-handle, .@{prefixClass}-dot {
border-color: @disabledColor;
background-color: #fff;
cursor: not-allowed;
}
- .@{prefixClass}-mark-text, .dot {
+ .@{prefixClass}-mark-text, .@{prefixClass}-dot {
cursor: not-allowed!important;
}
}
@@ -240,4 +240,4 @@
transform-origin: 50% 100%;
transform: scale(0, 0);
}
-}
\ No newline at end of file
+}
diff --git a/examples/simple.js b/examples/simple.js
index af1c84f..a375adf 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -10,5 +10,6 @@ function onChange(v){
}
// React.render(
, document.getElementById('__react-content'));
+// React.render(
, document.getElementById('__react-content'));
// React.render(
, document.getElementById('__react-content'));
React.render(
, document.getElementById('__react-content'));
diff --git a/package.json b/package.json
index c45786c..da4079a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "rc-slider",
- "version": "1.5.0",
+ "version": "1.5.1",
"description": "slider ui component for react",
"keywords": [
"react",
diff --git a/src/Slider.jsx b/src/Slider.jsx
index 9a74914..cb1d452 100644
--- a/src/Slider.jsx
+++ b/src/Slider.jsx
@@ -57,6 +57,7 @@ const Slider = React.createClass({
onChange: React.PropTypes.func,
onAfterChange: React.PropTypes.func,
tipTransitionName: React.PropTypes.string,
+ withDots: React.PropTypes.bool,
},
getDefaultProps() {
@@ -72,6 +73,7 @@ const Slider = React.createClass({
disabled: false,
defaultIndex: 0,
tipTransitionName: '',
+ withDots: false,
};
},
@@ -208,37 +210,43 @@ const Slider = React.createClass({
renderSteps() {
const props = this.props;
const marksLen = props.marks.length;
- const stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
- const unit = 100 / (stepNum - 1);
+ const withDots = props.withDots;
- const prefixCls = props.prefixCls;
- const stepClassName = prefixClsFn(prefixCls, 'step');
+ if (marksLen || withDots) {
+ const stepNum = marksLen ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
+ const unit = 100 / (stepNum - 1);
- const elements = [];
- for (let i = 0; i < stepNum; i++) {
- const offset = unit * i + '%';
- const style = {
- left: offset,
- };
- let className = prefixClsFn(prefixCls, 'dot');
- if (props.isIncluded) {
- if (i <= this.getIndex()) {
- className = prefixClsFn(prefixCls, 'dot', 'dot-active');
+ const prefixCls = props.prefixCls;
+ const stepClassName = prefixClsFn(prefixCls, 'step');
+
+ const elements = [];
+ for (let i = 0; i < stepNum; i++) {
+ const offset = unit * i + '%';
+ const style = {
+ left: offset,
+ };
+ let className = prefixClsFn(prefixCls, 'dot');
+ if (props.isIncluded) {
+ if (i <= this.getIndex()) {
+ className = prefixClsFn(prefixCls, 'dot', 'dot-active');
+ }
+ } else {
+ className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
}
- } else {
- className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
+
+ elements[i] = (
+
+ );
}
- elements[i] = (
-
+ return (
+
+ {elements}
+
);
}
- return (
-
- {elements}
-
- );
+ return null;
},
renderMark(i) {
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 1e44888..1ea2b4a 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -39,8 +39,14 @@ describe('rc-slider', function () {
expect(node.find('.rc-slider').length).to.be(1);
expect(node.find('.rc-slider-handle').length).to.be(1);
expect(node.find('.rc-slider-track').length).to.be(1);
- expect(node.find('.rc-slider-dot').length).to.be(6);
expect(slider.state.value).to.be(0);
+
+ var sliderWithDots = React.render(
+ ,
+ div
+ );
+ var node1 = $(div);
+ expect(node1.find('.rc-slider-dot').length).to.be(6);
});
it('should render a slider with marks correctly!', function () {
@@ -64,7 +70,7 @@ describe('rc-slider', function () {
// div
// );
// var selectedStep = slider.refs.step3.getDOMNode();
-
+
// Simulate.mouseDown(selectedStep);
// setTimeout( function() {