@ivanvanderbyl/ember-material-components-slider v0.77.1-alpha.2
@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
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 isfalse
.displayMarkers
- Show markers on the slider (only ifdiscrete=true
)change
- The actionf(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
- Have the
mdc-slider
component be a child of a Ember component (let's call itParentComponent
). - Make the
ParentComponent
aware of when its layout has changed, such as listening fortransitionend
events and updating its internal state (e.g.,openComplete
). - Share the
ParentComponent
data with its wrapped content (see Sharing Component Data with its Wrapped Content) - Bind the
requestLayout
with the parent componentopenComplete
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);
}
}
5 years ago