Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@kanety/jquery-ui-durationslider

kanety16MIT0.4.1

Bind text field and jquery-ui slider for duration input

jquery-ui, slider, duration

readme

jquery-ui-durationslider

Bind text field and jquery-ui slider for duration input.

Dependencies

  • jquery-ui

Installation

Install from npm:

$ npm install @kanety/jquery-ui-durationslider --save

Usage

Make a text field and div elements for sliders:

<input id="text" type="text" value="10:08" style="width: 5em;" />
<div id="hour" style="width: 150px;"></div>
<div id="minute" style="width: 150px;"></div>

Then:

$('#text').durationslider({
  h: { elem: '#hour' },
  m: { elem: '#minute' }
});

If you want a slider for seconds:

$('#text').durationslider({
  h: { elem: '#hour' },
  m: { elem: '#minute' },
  s: { elem: '#second' }
});

Customize max value and step value:

$('#text').durationslider({
  h: { elem: '#hour', max: 48 },
  m: { elem: '#minute', step: 5 }
});

Customize duration format:

$('#text').durationslider({
  format: 'd [DAYS] hh.mm'
});
  • d: days
  • h: hours
  • m: minutes
  • s: seconds
  • []: raw text

Enable mousewheel support (only modern browsers):

$('#text').durationslider({
  mousewheel: true
});

License

The library is available as open source under the terms of the MIT License.

changelog

CHANGELOG

0.4.1

  • Fix error on empty value.

0.4.0

  • Remove moment dependency.

0.3.0

  • Export class for convenience.
  • Refactoring.

0.2.0

  • Simplify slider options.
  • Support day's slider.
  • Support mouse wheel event.
  • Refactoring.

0.1.0

  • First release.