> For the complete documentation index, see [llms.txt](https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/3.-app-developers-tutorial/3.5-slider-component.md).

# 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

```markup
<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>
```

\
&#x20;\
&#x20;Here is this view rendered by the application associated with this tutorial. \ <br>

![](http://i.imgur.com/uH0kQCn.png)

\
\
&#x20;Image 1

\
&#x20;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

```javascript
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`

```javascript
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;
  }
}
```