Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Get started
Build an element
1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties
Build an app
1. Get set up 2. Create a new page 3. Add some elements 4. Deploy

Now that you've added a new view to your application, you can start building out the details of that view.

In the process, you'll likely want to turn to some off-the-shelf components, for example from the Polymer Element Catalog or community catalogs like customelements.io.

Bower is a front-end package manager which is the most common tool used for fetching and managing web components.

Ensure it is installed by running the following command:

npm install -g bower

Once you've identified a component you'd like to install, you'll want to find the bower package name for the component.

In this step, you'll add Polymer's <paper-slider> element to your app, which is listed in the Polymer Element Catalog here. You'll find its bower install command on the left hand side of that screen.

Run this command from your project root directory:

bower install --save PolymerElements/paper-slider
  1. Open src/my-new-view.html in a text editor.

  2. Import paper-slider.html as a dependency

    Add this import beneath the existing import for polymer.html:

    <link rel="import" href="../bower_components/paper-slider/paper-slider.html">
    
  3. Add the <paper-slider> element to the template for the element.

    <paper-slider min="-100" max="100" value="50"></paper-slider>
    

    You can add it under the <h1> you added in the previous step. Your new template should look like this:

    <!-- Defines the element's style and local DOM -->
    <template>
      <style>
        :host {
          display: block;
    
          padding: 16px;
        }
      </style>
    
      <h1>New view</h1>
      <paper-slider min="-100" max="100" value="50"></paper-slider>
    </template>
    

You should be able to see the paper-slider working in your new view now: http://localhost:8080/new-view.

Example of page with slider

Now that you've added a 3rd-party component to your page, learn how to deploy the app to the web.