https://github.com/thecreation/jquery-asrange

a powerful jquery range plugin for choose a range of value
https://github.com/thecreation/jquery-asrange

form-input jquery-plugin number-input range range-picker

Last synced: 6 months ago
JSON representation

a powerful jquery range plugin for choose a range of value

Host: GitHub
URL: https://github.com/thecreation/jquery-asrange
Owner: thecreation
License: lgpl-3.0
Created: 2013-04-18T11:27:36.000Z (about 13 years ago)
Default Branch: master
Last Pushed: 2017-09-26T17:36:20.000Z (over 8 years ago)
Last Synced: 2024-12-10T00:57:09.114Z (over 1 year ago)
Topics: form-input, jquery-plugin, number-input, range, range-picker
Language: JavaScript
Homepage:
Size: 700 KB
Stars: 11
Watchers: 5
Forks: 10
Open Issues: 11
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

          # [jQuery asRange](https://github.com/amazingSurge/jquery-asRange) ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing)

> A jquery plugin to convert input into range slider.

## Table of contents

- [Main files](#main-files)

- [Quick start](#quick-start)

- [Requirements](#requirements)

- [Usage](#usage)

- [Examples](#examples)

- [Options](#options)

- [Methods](#methods)

- [Events](#events)

- [No conflict](#no-conflict)

- [Browser support](#browser-support)

- [Contributing](#contributing)

- [Development](#development)

- [Changelog](#changelog)

- [Copyright and license](#copyright-and-license)

## Main files

```

dist/

├── jquery-asRange.js

├── jquery-asRange.es.js

├── jquery-asRange.min.js

└── css/

    ├── asRange.css

    └── asRange.min.css

```

## Quick start

Several quick start options are available:

#### Download the latest build

 * [Development](https://raw.githubusercontent.com/amazingSurge/jquery-asRange/master/dist/jquery-asRange.js) - unminified

 * [Production](https://raw.githubusercontent.com/amazingSurge/jquery-asRange/master/dist/jquery-asRange.min.js) - minified

#### Install From Bower

```sh

bower install jquery-asRange --save

```

#### Install From Npm

```sh

npm install jquery-asRange --save

```

#### Install From Yarn

```sh

yarn add jquery-asRange

```

#### Build From Source

If you want build from source:

```sh

git clone git@github.com:amazingSurge/jquery-asRange.git

cd jquery-asRange

npm install

npm install -g gulp-cli babel-cli

gulp build

```

Done!

## Requirements

`jquery-asRange` requires the latest version of [`jQuery`](https://jquery.com/download/).

## Usage

#### Including files:

```html

```

#### Required HTML structure

```html

```

#### Initialization

All you need to do is call the plugin on the element:

```javascript

jQuery(function($) {

  $('.example').asRange(); 

});

```

## Examples

There are some example usages that you can look at to get started. They can be found in the

[examples folder](https://github.com/amazingSurge/jquery-asRange/tree/master/examples).

## Options

`jquery-asRange` can accept an options object to alter the way it behaves. You can see the default options by call `$.asRange.setDefaults()`. The structure of an options object is as follows:

```

{

  namespace: 'asRange',

  skin: null,

  max: 100,

  min: 0,

  value: null,

  step: 10,

  limit: true,

  range: false,

  direction: 'h', // 'v' or 'h'

  keyboard: true,

  replaceFirst: false, // false, 'inherit', {'inherit': 'default'}

  tip: true,

  scale: true,

  format(value) {

    return value;

  }

}

```

    

        

            Property

            Default

            Description

        

    

    

        

            namespace

            "asRange"

            Optional property, set a namspace for css class, for example, we have .asRange_active class for active effect, if namespace set to 'as-range', then it will be .as-range_active

        

        

            skin

            null

            Compulsory property, set transition effect, it works after you load specified skin file

        

        

            max

            100

            Optional property, set the maximum range value of the progress bar

        

        

            min

            0

            Optional property, set the initial value of the progress bar

        

        

            value

            null

            Optional property, set the pointer to the initial position

        

        

            step

            10

            Optional property, set up the moving step at a time

        

        

            limit

            true

            Optional property, if true, limit the range of the pointer moving

        

        

            range

            false

            Optional property, if true, allow to set min and max

        

        

            direction

            'v'

            Optional property, set the direction for the progress bar ,'v' for vertical and 'h' for horizontal

        

        

            keyboard

            true

            Optional property, if true, allow to change value using keyboard

        

        

            replaceFirst

            false

            Optional property, set the default value when value is set as min.

        

        

            tip

            true

            Optional property, if true, the component of tip will  display and follow the pointer

        

        

            scale

            Object

            Optional property, values means the value you want to add to scale; gap means how many parts you want to division between value; grid means how many small parts in the part

        

        

            format

            function(value) {return value;}

            Optional property, a function of formatting output 

        

        

            onChange

            function(instance) {}

            Optional property, according to your need, it can be as a function of the extended interface

        

    

## Methods

Methods are called on asRange instances through the asRange method itself.

You can also save the instances to variable for further use.

```javascript

// call directly

$().asRange('destroy');

// or

var api = $().data('asRange');

api.destroy();

```

#### val(value)

Set the range if value is defined or get the value.

```javascript

// set the val

$().asRange('val', '5');

// get the val

var value = $().asRange('val');

```

#### set(value)

Set the range value.

```javascript

$().asRange('set', '5');

```

#### get()

Get the range value.

```javascript

var value = $().asRange('get');

```

#### enable()

Enable the range functions.

```javascript

$().asRange('enable');

```

#### disable()

Disable the range functions.

```javascript

$().asRange('disable');

```

#### destroy()

Destroy the range instance.

```javascript

$().asRange('destroy');

```

## Events

`jquery-asRange` provides custom events for the plugin’s unique actions. 

```javascript

$('.the-element').on('asRange::ready', function (e) {

  // on instance ready

});

```

Event   | Description

------- | -----------

init    | Fires when the instance is setup for the first time.

ready   | Fires when the instance is ready for API use.

enable  | Fires immediately when the `enable` instance method has been called.

disable | Fires immediately when the `disable` instance method has been called.

change  | Fires when the position of pointer is changed.

end     | Fires when mouse up.

destroy | Fires when an instance is destroyed. 

## No conflict

If you have to use other plugin with the same namespace, just call the `$.asRange.noConflict` method to revert to it.

```html

  $.asRange.noConflict();

  // Code that uses other plugin's "$().asRange" can follow here.

```

## Browser support

Tested on all major browsers.

|  |  |  |  |  |  |

|:--:|:--:|:--:|:--:|:--:|:--:|

| Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ |

As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/).

## Contributing

Anyone and everyone is welcome to contribute. Please take a moment to

review the [guidelines for contributing](CONTRIBUTING.md). Make sure you're using the latest version of `jquery-asRange` before submitting an issue. There are several ways to help out:

* [Bug reports](CONTRIBUTING.md#bug-reports)

* [Feature requests](CONTRIBUTING.md#feature-requests)

* [Pull requests](CONTRIBUTING.md#pull-requests)

* Write test cases for open bug issues

* Contribute to the documentation

## Development

`jquery-asRange` is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

```sh

npm install -g gulp

npm install -g babel-cli

npm install

```

Then you can generate new distributable files from the sources, using:

```

gulp build

```

More gulp tasks can be found [here](CONTRIBUTING.md#available-tasks).

## Changelog

To see the list of recent changes, see [Releases section](https://github.com/amazingSurge/jquery-asRange/releases).

## Copyright and license

Copyright (C) 2016 amazingSurge.

Licensed under [the LGPL license](LICENSE).

[⬆ back to top](#table-of-contents)

[bower-image]: https://img.shields.io/bower/v/jquery-asRange.svg?style=flat

[bower-link]: https://david-dm.org/amazingSurge/jquery-asRange/dev-status.svg

[npm-image]: https://badge.fury.io/js/jquery-asRange.svg?style=flat

[npm-url]: https://npmjs.org/package/jquery-asRange

[license]: https://img.shields.io/npm/l/jquery-asRange.svg?style=flat

[prs-welcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg

[daviddm-image]: https://david-dm.org/amazingSurge/jquery-asRange.svg?style=flat

[daviddm-url]: https://david-dm.org/amazingSurge/jquery-asRange

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/thecreation/jquery-asrange

Awesome Lists containing this project

README