meteor add muqube:autoform-nouislider
Adds the noUiSlider
type to autoform. It uses min
, max
, and step
attributes like a normal slider, so it can be a drop in replacement, but options passed as noUiSliderOptions
are passed directly to nouislider for advanced control.
{{> afFieldInput type="noUiSlider" name="foo" min=5 max=10 step=1}}
CollectionSchema = new SimpleSchema({
slider: {
type: Number,
max: 150,
min: 30,
autoform: {
type: "noUiSlider",
step: 10,
noUiSlider_pipsOptions: {
mode: 'steps',
density: 5
}
}
}
});
RangeSchema = new SimpleSchema({
lower: {
type: Number
},
upper: {
type: Number
}
});
CollectionSchema = new SimpleSchema({
slider: {
type: RangeSchema,
max: 150,
min: 30,
autoform: {
type: "noUiSlider",
noUiSliderOptions: {
step: 10
},
noUiSlider_pipsOptions: {
mode: 'steps',
density: 5
}
}
}
});
To get a vertical slider, do noUiSliderOptions: {orientation: 'vertical'}
and specify an exact height
in the CSS for the nouislider
class.
You can override start and range by passing the options in.
Be sure that the values passed in match the format below.
{{> afQuickField name='slider' start="[50,60]"}}
{{> afQuickField name='singleSlider' range='{"min": 2,"max":50}'}}
Show a label left and/or right of the slider
{{> afFieldInput type="noUiSlider" name="foo" labelLeft="ugly" labelRight="delicious" min=0 max=1 step=0.1}}
This meteor package is a fork of elevatedevdesign:autoform-nouislider. I forked it to make it compatible with meteor 1.3 and fix some bugs.
- Bug fixed: start and range options set in schema definition was overwritten
- Removed dependency on wrapper package
rcy:nouislider
- Bug fixed: "Slider was already initialized" error fixed