pf-progress-slider
Polymer 2.0, custom web component, Interactive progress with different types of responsive indicators, highly customizable and visually appealing.
[ This description is mirrored from README.md at github.com/PFElements/pf-progress-slider on 2019-05-22 ]
pf-elements
A Polymer 2.0 based collection of reusable web components
Demo
| Element Name | Latest Version (Bower) | Npm version | Build Status |
|---|---|---|---|
| pf-progress-slider |  |
 |
 |
Install the Polymer-CLI
First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.
A composite component
<pf-progress-slider></pf-progress-slider> Use this element to track the progress of the user, this can be made interactive as well and user can go back to a certain step and submit the progress again, progress bar will update the progress status with the right indication(color).
Horizontal Example
<pf-progress-slider steps="55">
</pf-progress-slider>
Vertical Example
<pf-progress-slider vertical steps="70>
</pf-progress-slider>
Customization and usage
This element can be customized in a number of ways
Events
| Custom Event | Description |
|---|---|
position-changed |
This event is Fired when position is changed |
Methods
The following methods are available for crude events operation:
| Methods | Description |
|---|---|
setCurrentPos(value) |
Sets the current position of the slider to the given value |
getCurrentPos() |
Returns current value |
setPosState(state, step) |
Sets the state of the given step e.g. set step 3 as pass |
Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--pf-default-bar-color |
Default color of bar | silver |
--pf-pass-bar-color |
Passed color of bar | 27ae60 |
--pf-fail-bar-color |
Failed color of bar | e74c3c |
--pf-skip-bar-color |
Skipped color of bar | 3498db |
Install the Polymer-CLI
First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.
Viewing Your Application
$ polymer serve
Building Your Application
$ polymer build
This will create a build/ folder with bundled/ and unbundled/ sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.
You can serve the built versions by giving polymer serve a folder to serve
from:
$ polymer serve build/bundled
Running Tests
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.
Learn more
See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:
Go to webcomponents.org
Contributing
Comments, questions, suggestions, issues, and pull requests are all welcome.
Get in touch with the team
Joing us at
Some ways to help:
- Test the elements and provide feedback: We would love to hear your feedback on anything related to the elements, like features, API and design. The best way to start is by trying them out. And to get a quick response, either drop a question/comment on the chat or open an issue in GitHub.
- Report bugs: File issues for the elements in their respective GitHub projects.
- Send pull requests: If you want to contribute code, check out the development instructions below.
We encourage you to read the contribution instructions by GitHub also.
License
MIT License
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
Polymer/polymer
- PolymerElements/paper-slider
- Released
- 2017-09-14
- Maturity
- TESTED
- License
- Other
Compatibility
- Framework
- Polymer 1.0+
- Browser
- Browser Independent