3.5 Slider component
Unlike the previous two controls, Slider is represented (by Aurelia Materialize bridge) as an Aurelia custom element (component) - since slider is not a native HTML element.
View: md-slider.html
<template>
<h4>Materialize slider demo</h4>
<div class="container">
<div class="row">
<div class="col s8">
<md-slider>
<md-slide repeat.for="slide of slides" img.bind="slide.img" caption-align.bind="img.align">
<h3>${slide.heading}</h3>
<h5>${slide.subheading}</h5>
</md-slide>
</md-slider>
</div>
</div>
</div>
</template>
Here is this view rendered by the application associated with this tutorial.

Image 1
The HTML code in the view is a good demonstration of Aurelia's support for declarative programming - all attributes of the slider are declared there and bound to view model shown next.
View model: md-slider.js
export class MdSliderDemo {
slides = [
{ img: 'http://lorempixel.com/580/250/nature/1', align: 'center', heading: 'This is our big Tagline!', subheading: 'Here is our small slogan.' },
{ img: 'http://lorempixel.com/580/250/nature/2', align: 'left', heading: 'Left Aligned Caption', subheading: 'Here is our small slogan.' },
{ img: 'http://lorempixel.com/580/250/nature/3', align: 'right', heading: 'Right Aligned Caption', subheading: 'Here is our small slogan.' },
{ img: 'http://lorempixel.com/580/250/nature/4', align: 'center', heading: 'This is another big Tagline!', subheading: 'Here is our small slogan.' }
];
}
Finally, add the new component to your router-configuration:
File app.js
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' },
{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' },
{ route: 'md-select', name: 'md-select', moduleId: 'material/select/md-select', nav: true, title: 'Select' },
{ route: 'md-button', name: 'md-button', moduleId: 'material/button/md-button', nav: true, title: 'Button' },
{ route: 'md-slider', name: 'md-slider', moduleId: 'material/slider/md-slider', nav: true, title: 'Slider' }
]);
this.router = router;
}
}
Last updated