@ivanvanderbyl/ember-material-components-form

ember-cli addon for @material/slider.

Installation

ember install @ivanvanderbyl/ember-material-components-slider

Components

This package contains the following top-level components.

• mdc-slider

mdc-slider

Description

Add a Material Slider component to the parent element.

Usage

{{mdc-slider min=min
             max=max
             value=value
             discrete=[true|false]
             displayMarkers=[true|false]
             change=(action "change")
}}

Attributes

• min - The minimum value for the slider.
• max - The maximum value for the slider.
• value - The current value of the slider.
• label - The accessibility label for the slider.
• discrete - Make the slider a discrete slider; default is false.
• displayMarkers - Show markers on the slider (only if discrete=true)
• change - The action f(value) called after slider value is committed.

Examples

{{mdc-slider min=0 max=100 value=value
             label="Select value"
             change=(action (mut selected))}}

Value vs. Change

The value attribute of the mdc-slider will change instantaneously as the slider is moved from side to side. The change action is called only when the slider stops moving. This means the user has selected a terminal value, and the slider is committing the value.

Layout Requests

There are cases when you will need to manually request the slider to update its layout in order for the component to function correctly. For example, if the slider is initially rendered of screen, say in a menu, and the menu is transitioned onscreen, then the slider will not slide. This is because the layout of the slider is based on its initial location, and not its new location on the screen. This is a known issue with the material-components-web slider component.

To address this concern/issue, the mdc-slider component has a requestLayout attribute that can be set to signal the component to update its layout. To use this attribute, its best to

1. Have the mdc-slider component be a child of a Ember component (let's call it ParentComponent).
2. Make the ParentComponent aware of when its layout has changed, such as listening for transitionend events and updating its internal state (e.g., openComplete).
3. Share the ParentComponent data with its wrapped content (see Sharing Component Data with its Wrapped Content)
4. Bind the requestLayout with the parent component openComplete state.

Here is an example illustrating this approach. Let's assume we have a menu that initially starts offscreen and then slides on screen.

{{#m-menu open=open as |m|}}
  {{mdc-slider min=0 max=100 value=50 requestLayout=m.isOpenComplete}}
{{/m-menu}}

{{#unless open}}
  <button {{action (mut open) true}}>open</button>
{{else}}
  <button {{action (mut open) false}}>close</button>
{{/unless}}

As shown in the example above, we have m-menu component. The m-menu component is sharing its data (i.e., state) with mdc-slider component. As the menu state changes (i.e., the open variable changes causing the menu location to transition), the slider will make a layout request at the end of the transition.

For completeness, here is the m-menu component implementation:

import Component from '@ember/component';
import layout from '../templates/components/issue7-menu';

export default Component.extend({
  layout,

  classNames: ['m-menu'],

  classNameBindings: ['open:m-menu-open'],

  open: false,

  isOpenComplete: false,

  _transitionEndListener: null,

  init () {
    this._super (...arguments);

    this._transitionEndListener = this._transitionEnd.bind (this);
  },

  didInsertElement () {
    this._super (...arguments);

    // Listen for the transition end event.
    this.element.addEventListener ('transitionend', this._transitionEndListener);
  },

  _transitionEnd () {
    // Update the open complete state.
    const isOpenComplete = this.element.classList.contains ('m-menu-open');
    this.set ('isOpenComplete', isOpenComplete);
  }
});

and here is the SASS for the component.

.m-menu {
  border: solid 1px;
  transform: translateX(-100%);
  transition: all .5s;

  &-open {
    transform: translateX(0);
  }
}