{"_id":"@alekstar79/range-slider","_rev":"2-a51f037eede7c08ce1eb440cb758f82a","name":"@alekstar79/range-slider","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@alekstar79/range-slider","version":"1.0.0","keywords":["range","slider","typescript","vite","scss","ui","input","accessibility"],"author":{"name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru"},"license":"MIT","_id":"@alekstar79/range-slider@1.0.0","maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"homepage":"https://github.com/alekstar79/range-slider#readme","bugs":{"url":"https://github.com/alekstar79/range-slider/issues"},"dist":{"shasum":"2c9149464f871048cef427f14a30ad486a774ef5","tarball":"https://registry.npmjs.org/@alekstar79/range-slider/-/range-slider-1.0.0.tgz","fileCount":11,"integrity":"sha512-8w2MDyOW5ka0B77iLFn16uIyWBwEKtF7jF1Cbt7ABdvud8qNmtfShhbopVtNNG4MCEiMOW7+qsixwVSGfTgIGQ==","signatures":[{"sig":"MEUCIEq2PFx5ujlz6iA6yrdXuANUNz3hUCEfjr76a3JBvf7sAiEAs6tET2TV9+MiIZMC8DqUAx/cMnZK5nn4llcoqYLwAhI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":231828},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./style.css":"./dist/index.css"},"gitHead":"937e48fac8cf79a1cb6ae945bd3cd1f0cd4d7918","private":false,"scripts":{"dev":"vite --config vite.demo.config.ts","test":"vitest run","build":"vite build --config vite.config.ts && tsc -p tsconfig.build.json && vite build --config vite.demo.config.ts","prepack":"npm run test && npm run build","preview":"vite preview --config vite.demo.config.ts","test:watch":"vitest","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"alekstar79","email":"alekstar79@yandex.ru"},"repository":{"url":"git+https://github.com/alekstar79/range-slider.git","type":"git"},"_npmVersion":"11.13.0","description":"A modern, TypeScript-first range slider with single and double handles, keyboard support, skin.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"22.21.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.0","vite":"^8.0.0","jsdom":"^26.0.1","vitest":"^3.2.4","typescript":"^5.8.3","@types/node":"^26.1.1","@vitest/coverage-v8":"^3.2.7"},"_npmOperationalInternal":{"tmp":"tmp/range-slider_1.0.0_1783778681400_0.8487930393134366","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alekstar79/range-slider","description":"A modern, TypeScript-first range slider with single and double handles, keyboard support, skin.","author":{"name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru"},"license":"MIT","version":"1.0.1","type":"module","private":false,"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./style.css":"./dist/index.css"},"scripts":{"dev":"vite --config vite.demo.config.ts","build":"vite build --config vite.config.ts && tsc -p tsconfig.build.json && vite build --config vite.demo.config.ts","preview":"vite preview --config vite.demo.config.ts","test":"vitest run","test:coverage":"vitest run --coverage","test:watch":"vitest","prepack":"npm run test && npm run build"},"keywords":["range","slider","typescript","vite","scss","ui","input","accessibility"],"repository":{"type":"git","url":"git+https://github.com/alekstar79/range-slider.git"},"homepage":"https://github.com/alekstar79/range-slider#readme","bugs":{"url":"https://github.com/alekstar79/range-slider/issues"},"sideEffects":["*.css","*.scss"],"engines":{"node":">=20"},"publishConfig":{"access":"public"},"devDependencies":{"@types/node":"^26.1.1","@vitest/coverage-v8":"^3.2.7","jsdom":"^26.0.1","sass":"^1.77.0","typescript":"^5.8.3","vite":"^8.0.0","vitest":"^3.2.4"},"gitHead":"780bf13a7fe476f5dddfe6e02dc205c731577e7e","_id":"@alekstar79/range-slider@1.0.1","_nodeVersion":"22.21.1","_npmVersion":"11.13.0","dist":{"integrity":"sha512-AcoOvcctOHod0u9bqNgZJEVedbSRhpKojrQk6xbwzCdqzH/S/7RVwXCmYQh2MRZJet4CQRE6GjoLoTJYMwWj+A==","shasum":"8096e128825f0dd97725393dcb8f19a9c0890815","tarball":"https://registry.npmjs.org/@alekstar79/range-slider/-/range-slider-1.0.1.tgz","fileCount":11,"unpackedSize":231883,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCniLHRd2AELrsCFa08Q3y5V5vdLm0w7aeFjsG0jgpqJgIgc8ZbHFkK/P81x4BOZ93G40mfeJWzXO+VA8xReFhWAf8="}]},"_npmUser":{"name":"alekstar79","email":"alekstar79@yandex.ru"},"directories":{},"maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/range-slider_1.0.1_1783783334918_0.7874521187139123"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-11T14:04:41.302Z","modified":"2026-07-11T15:22:15.224Z","1.0.0":"2026-07-11T14:04:41.560Z","1.0.1":"2026-07-11T15:22:15.103Z"},"bugs":{"url":"https://github.com/alekstar79/range-slider/issues"},"author":{"name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru"},"license":"MIT","homepage":"https://github.com/alekstar79/range-slider#readme","keywords":["range","slider","typescript","vite","scss","ui","input","accessibility"],"repository":{"type":"git","url":"git+https://github.com/alekstar79/range-slider.git"},"description":"A modern, TypeScript-first range slider with single and double handles, keyboard support, skin.","maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"readme":"# Range Slider\n\n[](https://www.npmjs.com/package/@alekstar79/range-slider)\n[](https://nodejs.org/)\n[](https://github.com/alekstar79/range-slider/blob/main/LICENSE)\n[]()\n\n\n\n**[LIVE DEMO](https://alekstar79.github.io/range-slider)**\n\nA modern, TypeScript-first range slider for single and double selection, built for today’s web applications without jQuery or legacy browser shims.\n\nIt provides a polished interaction model, flexible configuration, keyboard accessibility, built-in skins, and a small, ergonomic API for integration into any UI.\n\n\n* [Range Slider](#range-slider)\n * [Features](#features)\n * [Installation](#installation)\n * [Quick start](#quick-start)\n * [Usage with an input element](#usage-with-an-input-element)\n * [Common options](#common-options)\n * [Events and instance API](#events-and-instance-api)\n * [Demo](#demo)\n * [Development](#development)\n * [License](#license)\n\n\n## Features\n\n- Single and double-handle modes\n- Pointer and keyboard interaction\n- Built-in skins: flat, round, big, sharp, square, and modern\n- Optional min/max labels, from/to labels, and grid ticks\n- Custom formatting and prettified values\n- Works with standalone containers or native input elements\n- No jQuery dependency and no IE compatibility layer\n\n## Installation\n\n```bash\nnpm install @alekstar79/range-slider\n```\n\n## Quick start\n\n```ts\nimport { createRangeSlider } from '@alekstar79/range-slider'\nimport '@alekstar79/range-slider/style.css'\n\nconst host = document.getElementById('slider')\n\nif (host) {\n createRangeSlider(host, {\n type: \"double\",\n min: 0,\n max: 100,\n from: 20,\n to: 80,\n step: 5,\n skin: \"round\",\n grid: true,\n })\n}\n```\n\n```html\n\n```\n\n## Usage with an input element\n\nThe library can also decorate a native input and keep it in sync with the slider state:\n\n```html\n\n```\n\n```ts\nimport { createRangeSliderFromInput } from '@alekstar79/range-slider'\nimport '@alekstar79/range-slider/style.css'\n\nconst input = document.getElementById('price') as HTMLInputElement\n\ncreateRangeSliderFromInput(input, {\n type: \"double\",\n min: 0,\n max: 100,\n skin: \"modern\",\n grid: true,\n})\n```\n\n## Common options\n\n| Option | Type | Default | Description |\n|----------------------|-----------------------------|--------------|----------------------------------------------|\n| `type` | `'single' \\| 'double'` | `'single'` | Selects one or two handles. |\n| `min` / `max` | `number` | `10` / `100` | Defines the slider range. |\n| `from` / `to` | `number` | `10` / `100` | Initial handle positions. |\n| `step` | `number` | `1` | Step size for pointer and keyboard movement. |\n| `skin` | `string` | `'flat'` | Chooses the visual theme. |\n| `grid` | `boolean` | `false` | Shows tick marks. |\n| `keyboard` | `boolean` | `true` | Enables arrow key navigation. |\n| `hide_min_max` | `boolean` | `false` | Hides the min/max labels. |\n| `hide_from_to` | `boolean` | `false` | Hides the from/to labels. |\n| `prefix` / `postfix` | `string` | `''` | Adds visual decoration to values. |\n| `valueFormatter` | `(value: number) => string` | `null` | Custom formatter for labels. |\n| `disable` / `block` | `boolean` | `false` | Locks interaction. |\n\n## Events and instance API\n\nThe slider instance exposes a compact API for updates and event handling:\n\n```ts\nimport { createRangeSlider } from '@alekstar79/range-slider'\n\nconst slider = createRangeSlider(host, { type: 'single' })\n\nslider.on('change', (result) => {\n console.log(result.from, result.to)\n})\n\nslider.update({ skin: 'sharp', from: 42 })\nslider.destroy()\n```\n\nSupported events:\n\n- `start`\n- `change`\n- `finish`\n- `update`\n\n## Demo\n\nA local demo is included in the package sources and can be launched with:\n\n```bash\nnpm run dev\n```\n\n## Development\n\n```bash\nnpm install\nnpm test\nnpm test:coverage\nnpm run build\n```\n\n## License\n\nThis project is released under the MIT License. See [LICENSE](LICENSE) \n","readmeFilename":"README.md"}