# @vatsalmewada/time_range_slider

> Slider for changing time range in inputs.

Latest version **1.0.6** (published 2022-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vatsalmewada/time_range_slider
pnpm add @vatsalmewada/time_range_slider
yarn add @vatsalmewada/time_range_slider
bun add @vatsalmewada/time_range_slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2022-05-09 |
| First published | 2022-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vatsal Mewada |
| Maintainers | vatsalmewada |
| Keywords | jquery-plugin, ecosystem:jquery, DoubleTimeRangeSlider, DoubleRangeSlider, DoubleToggleSlider |

## Links

- npm: https://www.npmjs.com/package/@vatsalmewada/time_range_slider
- Repository: https://github.com/VatsalMewada/time_range_slider
- Homepage: https://github.com/VatsalMewada/time_range_slider#readme
- Issues: https://github.com/VatsalMewada/time_range_slider/issues
- npm.io page: https://npm.io/package/@vatsalmewada/time_range_slider

## Dependencies (1)

- [jquery](https://npm.io/package/jquery.md) *

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2022-05-09
- 1.0.5 — 2022-05-08
- 1.0.4 — 2022-05-08
- 1.0.3 — 2022-05-08
- 1.0.2 — 2022-05-08
- 1.0.1 — 2022-05-08
- 1.0.0 — 2022-05-08

## README

# Time Range Slider

Time Range Slider makes it easier to handle time ranges.

## Prerequisites

This package depends on jQuery, so it's most useful in a project where you are already using jQuery.

## Installation

Inside your project environment in your terminal run the following:

```bash
npm i @vatsalmewada/time_range_slider
```

then you should add

    require("jquery")
    require("@vatsalmewada/time_range_slider")

## Basic Usage

Suppose you have a `div` element with class `time_range_slider`:
```html
<div class='time_range_slider'></div>
```

to apply this plugin on your div, you need to add following line to your script:
```javascript
$('.time_range_slider').time_range_slider();
```
Your div will look something like this

![Applied time range slider on div](https://www.linkpicture.com/q/Screenshot-from-2022-05-08-12-43-51.png)

Now, to show the values of this range slider we need two textboxes. One is for Start time and another for End time.

```html
<div class='time_range_slider'></div>

<input type="text" class="start_time_input"/>
<input type="text" class="end_time_input"/>
```

and then apply time_range_slider,

```javascript
$('.time_range_slider').time_range_slider();
```

![Applied time range slider on div](https://www.linkpicture.com/q/Screenshot-from-2022-05-09-10-37-19.png)


## Plugin Properties

Name |	Description 
-----------------|------
main_sel    | To put custom class name as a selector for `main div`	
start_time_sel    | To put custom class name as a selector for `start_time input`	
end_time_sel    | To put custom class name as a selector for `end_time input`	
start_time    | To put default start_time. e.g. `6:30`	
end_time    | To put default end_time. e.g. `17:00`	  

## Examples

```javascript
$( ".vatsal" ).time_range_slider({
    main_sel: '.vatsal',                 // For custom `main div`
    start_time_sel: '.start_time_input', // For custom `start_time input`
    end_time_sel: '.end_time_input',     // For custom `end_time input`
    start_time: '6:30',                  // For custom `start_time`
    end_time: '17:00',                   // For custom `end_time`
});
```

## Copyright

Copyright (c) 2022 Vatsal Mewada. See LICENSE for details.

---
_Source: https://npm.io/package/@vatsalmewada/time_range_slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._