https://github.com/kanety/jquery-ui-durationslider

https://github.com/kanety/jquery-ui-durationslider

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/jquery-ui-durationslider
• Owner: kanety
• License: mit
• Created: 2018-12-16T07:39:34.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-07T02:30:00.000Z (about 6 years ago)
• Last Synced: 2025-01-02T15:47:51.384Z (15 days ago)
• Language: JavaScript
• Size: 55.7 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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:

```html





```


Then:

```javascript

$('#text').durationslider({

  h: { elem: '#hour' },

  m: { elem: '#minute' }

});

```

If you want a slider for seconds:

```javascript

$('#text').durationslider({

  h: { elem: '#hour' },

  m: { elem: '#minute' },

  s: { elem: '#second' }

});

```

Customize max value and step value:

```javascript

$('#text').durationslider({

  h: { elem: '#hour', max: 48 },

  m: { elem: '#minute', step: 5 }

});

```

Customize duration format:

```javascript

$('#text').durationslider({

  format: 'd [DAYS] hh.mm'

});

```

* d: days

* h: hours

* m: minutes

* s: seconds

* []: raw text

Enable mousewheel support (only modern browsers):

```javascript

$('#text').durationslider({

  mousewheel: true

});

```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).