Skip to content

Commit 059cde5

Browse files
icebobicebob
committed
⭐ new: change slider to ion.rangeSlider
1 parent 8bede7f commit 059cde5

File tree

7 files changed

+904
-192
lines changed

7 files changed

+904
-192
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ A schema-based form generator component for Vue.js
2828
- [bootstrap-datetimepicker](https://github.com/Eonasdan/bootstrap-datetimepicker) for `datetime` fields (optional)
2929
- [spectrum](https://github.com/bgrins/spectrum) for `spectrum` color picker fields (optional)
3030
- [maskedinput](http://digitalbush.com/projects/masked-input-plugin/) for `masked` fields
31+
- [ion.rangeSlider](https://github.com/IonDen/ion.rangeSlider) for range slider fields
3132

3233
## Installation
3334
### NPM
@@ -158,7 +159,7 @@ npm run test
158159
* [x] HTML5 Color picker
159160
* [x] Color picker with spectrum
160161
* [x] Image editor
161-
* [ ] Better slider
162+
* [x] Better slider (ion.rangeSlider)
162163
* [ ] Groupable fields
163164
* [ ] Validation handling with multiple models
164165
* [ ] Bundle for vendor files

‎dev/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,20 @@
66
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
77
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
88
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
9-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.css">
109
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
1110
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
11+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.css">
12+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
1213

1314
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
1415
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
1516

1617
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
1718
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
18-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
1919
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
2020
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
2121
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
22+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
2223
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
2324
</head>
2425
<body>

‎dev/schema.js

+18-3
Original file line numberDiff line numberDiff line change
@@ -206,13 +206,28 @@ module.exports = {
206206
min: 1,
207207
max: 10,
208208
sliderOptions: {
209-
tooltip: "show"
209+
grid: true
210210
},
211211
validator: [
212212
validators.integer,
213213
validators.number
214214
]
215-
},
215+
},
216+
217+
{
218+
type: "slider",
219+
label: "Income",
220+
model: "income",
221+
multi: true,
222+
min: 0,
223+
max: 100000,
224+
sliderOptions: {
225+
type: "double",
226+
prefix: "$",
227+
step: 1000
228+
}
229+
},
230+
216231
{
217232
type: "select",
218233
label: "Language",
@@ -321,7 +336,7 @@ module.exports = {
321336
type: "staticMap",
322337
label: "Map",
323338
model: "address.geo",
324-
visible: true
339+
visible: false
325340
},
326341
{
327342
type: "select",

‎dist/vue-form-generator.js

+831-137
Large diffs are not rendered by default.

‎dist/vue-form-generator.min.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/fields/fieldSlider.vue

+41-8
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,63 @@
11
<template lang="jade">
2-
input.form-control(type="text", number, v-model="value", :data-slider-value="value", :data-slider-min="schema.min", :data-slider-max="schema.max", :disabled="disabled", :placeholder="schema.placeholder")
2+
input(type="text", :data-min="schema.min", :data-max="schema.max", :data-step="schema.step", :data-disable="disabled")
33
</template>
44

55
<script>
66
import abstractField from "./abstractField";
7+
import { defaults, isArray } from "lodash";
8+
79
export default {
810
mixins: [ abstractField ],
911
10-
1112
watch: {
1213
model: function() {
13-
if ($.fn.slider)
14-
$(this.$el).slider("setValue", this.value);
14+
if ($.fn.ionRangeSlider) {
15+
let valueFrom, valueTo;
16+
if (isArray(this.value)) {
17+
[ valueFrom, valueTo ] = this.value;
18+
} else
19+
valueFrom = this.value;
20+
21+
$(this.$el).data("ionRangeSlider").update({
22+
from: valueFrom,
23+
to: valueTo
24+
});
25+
}
1526
}
1627
},
1728
1829
ready() {
19-
if ($.fn.slider)
20-
$(this.$el).slider(this.schema.sliderOptions);
30+
if ($.fn.ionRangeSlider) {
31+
let valueFrom, valueTo;
32+
if (isArray(this.value)) {
33+
[ valueFrom, valueTo ] = this.value;
34+
} else
35+
valueFrom = this.value;
36+
37+
$(this.$el).ionRangeSlider(defaults(this.schema.sliderOptions || {}, {
38+
type: "single",
39+
grid: true,
40+
hide_min_max: true,
41+
from: valueFrom,
42+
to: valueTo,
43+
onChange: (slider) => {
44+
if (this.schema.sliderOptions.type == "double") {
45+
this.value = [ slider.from, slider.to ];
46+
} else {
47+
this.value = slider.from;
48+
}
49+
}
50+
}));
51+
}
52+
else
53+
console.warn("ion.rangeSlider library is missing. Please download from https://github.com/IonDen/ion.rangeSlider and load the script and CSS in the HTML head section!");
2154
}
2255
};
2356
</script>
2457

2558

2659
<style lang="sass">
27-
.slider.slider-horizontal {
28-
width: 100% !important;
60+
.irs {
61+
width: 100%;
2962
}
3063
</style>

‎test/unit/specs/fields/fieldSlider.spec.js

+5-37
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,14 @@ describe("fieldSlider.vue", () => {
2020
label: "Rating",
2121
model: "rating",
2222
min: 1,
23-
max: 10,
24-
placeholder: "Field placeholder"
23+
max: 10
2524
};
2625
let model = { rating: 8 };
2726
let input;
2827

2928
before( () => {
3029
createField(schema, model, false);
3130
input = el.getElementsByTagName("input")[0];
32-
//console.log(input);
3331
});
3432

3533
it("should contain an input text element", () => {
@@ -38,47 +36,17 @@ describe("fieldSlider.vue", () => {
3836

3937
expect(input).to.be.defined;
4038
expect(input.type).to.be.equal("text");
41-
expect(input.classList.contains("form-control")).to.be.true;
42-
expect(input.placeholder).to.be.equal(schema.placeholder);
43-
expect(input.getAttribute("data-slider-min")).to.be.equal("1");
44-
expect(input.getAttribute("data-slider-max")).to.be.equal("10");
45-
expect(input.disabled).to.be.false;
46-
});
47-
48-
it("should contain the value", (done) => {
49-
vm.$nextTick( () => {
50-
expect(input.getAttribute("data-slider-value")).to.be.equal("8");
51-
expect(input.value).to.be.equal("8");
52-
done();
53-
});
39+
expect(input.getAttribute("data-min")).to.be.equal("1");
40+
expect(input.getAttribute("data-max")).to.be.equal("10");
41+
expect(input.getAttribute("data-disable")).to.be.null;
5442
});
5543

5644
it("should set disabled", (done) => {
5745
field.disabled = true;
5846
vm.$nextTick( () => {
59-
expect(input.disabled).to.be.true;
60-
done();
61-
});
62-
});
63-
64-
it("input value should be the model value after changed", (done) => {
65-
model.rating = 3;
66-
vm.$nextTick( () => {
67-
expect(input.value).to.be.equal("3");
47+
expect(input.getAttribute("data-disable")).to.be.equal("");
6848
done();
6949
});
70-
71-
});
72-
73-
it("model value should be the input value if changed", (done) => {
74-
input.value = "6";
75-
trigger(input, "input");
76-
77-
vm.$nextTick( () => {
78-
expect(model.rating).to.be.equal(6);
79-
done();
80-
});
81-
8250
});
8351

8452
});

0 commit comments

Comments
 (0)