added padding attribute

scottkidder · Mar 27, 2019 · 9eca40f · 9eca40f
1 parent f64c42c
commit 9eca40f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/addon/components/range-slider.js b/addon/components/range-slider.js
@@ -18,6 +18,7 @@ export default Component.extend({
   start:        undefined,
   step:         undefined,
   margin:       undefined,
+  padding:      undefined,
   limit:        undefined,
   pips:         undefined,
   animate:      true,
@@ -63,7 +64,7 @@ export default Component.extend({
     let element = this.get('element');
     let { noUiSlider: slider } = element;
     let properties = this.getProperties(
-      'start', 'step', 'margin',
+      'start', 'step', 'margin', 'padding',
       'limit', 'range', 'connect',
       'orientation', 'direction',
       'behaviour', 'animate', 'snap',
@@ -106,7 +107,7 @@ export default Component.extend({
     let properties = this.getProperties(
       'margin', 'limit', 'step',
       'range', 'animate', 'snap',
-      'start'
+      'start', 'padding'
     );
 
     if (slider) {

diff --git a/tests/dummy/app/controllers/options.js b/tests/dummy/app/controllers/options.js
@@ -21,5 +21,15 @@ export default Controller.extend({
   limitMax: computed('model.limits.[]', function() {
     let limits = A(this.get('model.limits'));
     return limits.get('lastObject');
+  }),
+
+  paddingMin: computed('model.padding.[]', function() {
+    let padding = A(this.get('model.padding'));
+    return padding.get('firstObject');
+  }),
+
+  paddingMax: computed('model.padding.[]', function() {
+    let padding = A(this.get('model.padding'));
+    return padding.get('lastObject');
   })
 });
diff --git a/tests/dummy/app/routes/options.js b/tests/dummy/app/routes/options.js
@@ -8,6 +8,7 @@ export default Route.extend({
       defaultStart: [ 20, 80 ],
 
       margins: [ 20, 80 ],
+      padding: [ 20, 80 ],
       limits: [ 20, 60 ],
       steps: [ 20, 80 ],
       direction: 20,
@@ -35,6 +36,11 @@ export default Route.extend({
       model.set("limits", val);
     },
 
+    paddingChanged(val) {
+      let model = this.modelFor("options");
+      model.set("padding", val);
+    },
+
     directionChanged(val) {
       let model = this.modelFor("options");
       model.set("direction", val);

diff --git a/tests/dummy/app/templates/options.hbs b/tests/dummy/app/templates/options.hbs
@@ -143,6 +143,38 @@
     </div>
   </section>
 
+  <a href="#section-padding" id="section-padding" class="sect">&sect;</a><h2>Padding</h2>
+  <section>
+    <div class="view">
+      <p>Padding limits how close to the slider edges handles can be.</p>
+      <div class="example">
+        {{range-slider start=model.padding padding=10 range=model.defaultRange on-change="paddingChanged"}}
+        <div id="slider-padding"></div>
+        <span class="example-val">{{paddingMin}}</span>
+        <span class="example-val">{{paddingMax}}</span>
+      </div>
+
+      <div class="options">
+        <strong>Default</strong>
+        <div><em>none</em></div>
+
+        <strong>Accepted values</strong>
+        <div><code>number</code>,<br>
+          <code>array[number]</code>,<br>
+          <code>array[number, number]</code>
+        </div>
+      </div>
+    </div>
+
+    <div class="side">
+      {{#source-code language="handlebars"}}
+\{{range-slider start=model.padding
+               padding=10
+               range=model.defaultRange}}
+      {{/source-code}}
+    </div>
+  </section>
+
   <a href="#section-step" id="section-step" class="sect">&sect;</a><h2>Step</h2>
   <section>
     <div class="view">