Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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).

About

A numeric stepper component for ractive

Resources

Releases

No releases published

Packages

No packages published