A numeric stepper component for ractive
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
Gruntfile.js
README.md
package.json
ractive-stepper.js
ractive-stepper.min.js
webpack.config.js

README.md

ractive-stepper

A numeric stepper / spinner that allows full styling and customizability.

input[type="number"]'s aren't very customizable and its diffcult to achieve anything above the default styling that works in a consistent manner cross browser.

Demo

Live Demo

Install

npm install ractive-stepper --save

Usage

Add the stepper to your Ractive instance:

Ractive.extend({
    ...
    components: {
        stepper: require('ractive-stepper')
    },
    ...
});

Use it

<stepper value='{{ myValue }}'></stepper>

Styling

ractive-stepper provides minimal styling in the js. It is designed to provide a foundation to easily style the increment/decrement buttons.

By default they are small, cross browser css triangles. You can easily scale the size of the arrows by increasing the font-size of the .steppers container. It is also very easy to completely change the layout of the buttons (for example, a large "-/+" icon on either side of the button for mobile).