Foundation 5 sliders in dropdowns using EmberJS

Dana Hartweg
Apr 24, 2014 · 3 min read

The template

{{!-- templates/toolbar.hbs --}}

<li><a class="button" data-options="align:right" data-dropdown="fiberWidth" title="Fiber Width"><i class="fi-target"></i></a></li>

<div id="fiberWidth" class="f-dropdown content" data-dropdown-content>
<h7>Fiber Width</h7>

<div class="range-slider" data-options="start: 2; end: 80;" {{bind-attr data-slider="width"}}>
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
{{input type="hidden" value=width}}
</div> {{!-- end dropdown content --}}

The view

// views/toolbar.js

didInsertElement: function() {
// making sure the slider reflows after its dropdown is made visible the first time
var dropdown = this.$('div .f-dropdown.content');

// make all sliders reflow when their dropdowns are first opened'opened.fndtn.dropdown', function(e) {
$('.range-slider').foundation('slider', 'reflow');

// make sure the slider stays updated when a new record loads in
// only necessary when the dropdown opens again
dropdown.on('opened.fndtn.dropdown', function(e) {
var target_slider = $('.range-slider');
var new_value = target_slider.attr('data-slider');'slider', 'set_value', new_value);

return this._super();

Triggering the binding in Ember

// views/toolbar.js

var slider = this.$('.range-slider');

// send new value when slider is done changing
slider.on('mouseup.fndtn.slider touchend.fndtn.slider pointerup.fndtn.slider', function(e) {

    Dana Hartweg

    Written by

    Senior Front End Software Engineer, InVision Studio

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade