Get new jQuery plugins just once a week

×

range-picker

April 7, 2016

range-picker | A very simple jQuery plugin for range picker

range-picker is a JQuery plugin to create an easy-to-use widget to select a range of dates or values

Created by zhangtasdq

Download

range-picker

range-picker

a range picker of JQuery plugins

Screenshot

date-picker

Examples

  1. see sample folder
  2. jsfiddle

Browser Support

  1. chrome
  2. firefox
  3. IE8+

Requirements

  1. JQuery 1.7+

Usage

Install

download

download range-picker

bower
bower install --save range-picker

Import css

<link rel="stylesheet" href="../css/range-picker.css" type="text/css" charset="utf-8" />

Import javascript

<script src="../bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/range_picker.js" type="text/javascript" charset="utf-8"></script>

Call

$("#date_picker").rangepicker();

Options

startValue

default: none

require: true

the left label. eg: "2016/01/03"

endValue

default: none

require: true

the right label. eg: "2016/03/12"

type

type: String

default: single

require: false

Choose picker type, could be single - for one cursor, or double for two cursors

example
$("#number_range").rangepicker({
    type: "double",
    startValue: 0,
    endValue: 100,
    translateSelectLabel: function(currentPosition, totalPosition) {
        return parseInt(100 * (currentPosition / totalPosition));
    }
});

translateSelectLabel

type: Function

default: none

require: true

parameter
  1. currentPosition cursor position
  2. totalWidth the width of process bar

get the text for cursor

example
$("#number_range").rangepicker({
    startValue: 0,
    endValue: 100,
    translateSelectLabel: function(currentPosition, totalPosition) {
        return parseInt(100 * (currentPosition / totalPosition));
    }
});

Function

getSelectValue

get selected range

updatePosition

parameter
  1. endPosition the right cursor position
  2. startPosition the left cursor position

set the cursor position

example
var rangePicker = $("#number_range").rangepicker({
    startValue: 0,
    endValue: 100,
    translateSelectLabel: function(currentPosition, totalPosition) {
        return parseInt(100 * (currentPosition / totalPosition));
    }
});

rangePicker.updatePosition("-50px", "10%");
// rangePicker.updatePosition("-50px");
// rangePicker.updatePosition("-50px", "50px");
// rangePicker.updatePosition("90%", "10%");

Build

First, get a copy of the git repo by running:

git clone https://git.oschina.net/syjefbz/range-picker.git

Enter the directory and install the dependencies:

cd range-picker && npm install && bower install

Build

grunt

Test

grunt test
range-picker

Related posts:

HideSeek
insignia
selectator

To install using Bower
bower install range-picker

range-picker

http://jquer.in/wp-content/uploads/2016/03/range-picker.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever