jkuester:autoform-nouislider

Supports Meteor 2 and 3 and AutoForm 7 and 8.

Installation

meteor add jkuester:autoform-nouislider

There are two ways to import the package: dynamic and static. The default way is dynamic, where you import a function, containing a dynamic import. This prevents this package from being added to the initial client bundle and allows you to import it only at that point when it's really required.

1import loadAfNoUiSlider from 'meteor/jkuester:autoform-nouislider'
2
3// This is only an example of how to reactively track
4// if the extension has been loaded.
5// You can, of course, track it anyway you want!
6Template.myTemplate.onCreated(async function () {
7  const instance = this
8  instance.state = new ReactiveDict()
9  await loadAfNoUiSlider.default()
10  instance.state.set('afNoUiSliderLoaded', true)
11})

If you really need this package being added to the initial bundle, thus being present at startup time, then you should use the static import:

1import 'meteor/muqube:autoform-nouislider/static'

Configuration

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.

Simple Usage

{{> afFieldInput type="noUiSlider" name="foo" min=5 max=10 step=1}}

Single values Schema

1CollectionSchema = new SimpleSchema({
2  slider: {
3    type: Number,
4    max: 150,
5    min: 30,
6    autoform: {
7      type: "noUiSlider",
8      step: 10,
9      noUiSlider_pipsOptions: {
10        mode: 'steps',
11        density: 5
12      }
13    }
14  }
15});

Range Silder Schema

1RangeSchema = new SimpleSchema({
2  lower: {
3    type: Number
4  },
5  upper: {
6    type: Number
7  }
8});
9
10CollectionSchema = new SimpleSchema({
11  slider: {
12    type: RangeSchema,
13    max: 150,
14    min: 30,
15    autoform: {
16      type: "noUiSlider",
17      noUiSliderOptions: {
18        step: 10
19      },
20      noUiSlider_pipsOptions: {
21        mode: 'steps',
22        density: 5
23      }
24    }
25  }
26});

Vertical Slider

To get a vertical slider, do noUiSliderOptions: {orientation: 'vertical'} and specify an exact height in the CSS for the nouislider class.

Overridding start and range

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}'}}

Labels

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}}

License

See LICENSE file.