{"_id":"@cliqthemes/cliq-slider-control","name":"@cliqthemes/cliq-slider-control","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@cliqthemes/cliq-slider-control","version":"0.1.0","description":"A modern, dependency-free range/slider control with an optional jQuery plugin bridge. A clean rewrite of the bootstrap-slider feature set.","type":"module","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/cliqthemes/cliqui-slider-control.git"},"homepage":"https://github.com/cliqthemes/cliqui-slider-control#readme","bugs":{"url":"https://github.com/cliqthemes/cliqui-slider-control/issues"},"author":{"name":"CliqThemes"},"main":"./dist/cui-slider.umd.cjs","module":"./dist/cui-slider.js","types":"./types/index.d.ts","unpkg":"./dist/cui-slider.umd.cjs","sideEffects":["*.css"],"exports":{".":{"types":"./types/index.d.ts","import":"./dist/cui-slider.js","require":"./dist/cui-slider.umd.cjs"},"./style.css":"./dist/cui-slider.css","./jquery":{"types":"./types/jquery.d.ts","import":"./dist/cui-slider-jquery.js"}},"scripts":{"dev":"vite","build":"vite build && node scripts/build-extra.mjs","test":"vitest run","test:watch":"vitest"},"keywords":["slider","range","range-slider","input-range","jquery-plugin","form-control"],"license":"MIT","devDependencies":{"jquery":"^4.0.0","jsdom":"^25.0.1","vite":"^6.0.0","vitest":"^2.1.8"},"gitHead":"18e90a6f41b7f383ba13b27fca5497db18c7cd1a","_id":"@cliqthemes/cliq-slider-control@0.1.0","_nodeVersion":"22.19.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-TLg8cZPQBAz8OcxhJfpo2l7Aoaz2qfxf59gGgFEBQnROcO8kpF2HynIEYj/iGbIXKbyk2kO2//GX7DVY8A35Ww==","shasum":"cf73ea279978f6371c7f5b9ddc337f0bcc13083b","tarball":"https://registry.npmjs.org/@cliqthemes/cliq-slider-control/-/cliq-slider-control-0.1.0.tgz","fileCount":11,"unpackedSize":292606,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE10v9PVVbGxVyFyV6K2iqJjt+YcdAl4uCH0NORxP9IZAiEA1iq3oiEXI1203eH9gfdQRWz/5e59G9bLYrH1Az6nLAQ="}]},"_npmUser":{"name":"cliqthemes","email":"cliqthemes@gmail.com"},"directories":{},"maintainers":[{"name":"cliqthemes","email":"cliqthemes@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cliq-slider-control_0.1.0_1783336206047_0.8177320222810953"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-06T11:10:05.738Z","0.1.0":"2026-07-06T11:10:06.231Z","modified":"2026-07-06T11:10:06.455Z"},"maintainers":[{"name":"cliqthemes","email":"cliqthemes@gmail.com"}],"description":"A modern, dependency-free range/slider control with an optional jQuery plugin bridge. A clean rewrite of the bootstrap-slider feature set.","homepage":"https://github.com/cliqthemes/cliqui-slider-control#readme","keywords":["slider","range","range-slider","input-range","jquery-plugin","form-control"],"repository":{"type":"git","url":"git+https://github.com/cliqthemes/cliqui-slider-control.git"},"author":{"name":"CliqThemes"},"bugs":{"url":"https://github.com/cliqthemes/cliqui-slider-control/issues"},"license":"MIT","readme":"# cliq-slider-control\n\nA modern, dependency-free range/slider control with an optional jQuery plugin\nbridge — a clean rewrite of the [bootstrap-slider](https://github.com/seiyria/bootstrap-slider)\nfeature set: single or dual-handle (range), horizontal/vertical, ticks,\ntooltips, logarithmic scale, RTL, keyboard + touch support, all with zero\nruntime dependencies at its core.\n\n**[Live demo →](https://cliqthemes.github.io/cliqui-slider-control/)**\n\n## Installation\n\n```bash\nnpm install @cliqthemes/cliq-slider-control\n```\n\n```js\nimport { CuiSlider } from '@cliqthemes/cliq-slider-control';\nimport '@cliqthemes/cliq-slider-control/style.css';\n\nconst slider = new CuiSlider('#my-input', { min: 0, max: 100, value: 50 });\nslider.on('change', ({ newValue }) => console.log(newValue));\n```\n\n### With jQuery\n\n```js\nimport $ from 'jquery';\nimport { registerJQueryPlugin } from '@cliqthemes/cliq-slider-control/jquery';\nimport '@cliqthemes/cliq-slider-control/style.css';\n\nregisterJQueryPlugin($);\n\n$('#my-input').cuiSlider({ min: 0, max: 100, value: 50 });\n$('#my-input').on('change', function () {\n  console.log($(this).cuiSlider('getValue'));\n});\n```\n\n### Plain `<script>` tag / WordPress / no bundler\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@cliqthemes/cliq-slider-control/dist/cui-slider.css\" />\n<script src=\"https://code.jquery.com/jquery-3.7.1.min.js\"></script> <!-- optional -->\n<script src=\"https://unpkg.com/@cliqthemes/cliq-slider-control/dist/cui-slider.umd.cjs\"></script>\n<script>\n  // window.CuiSlider is the constructor directly:\n  const slider = new CuiSlider('#my-input', { min: 0, max: 100, value: 50 });\n\n  // if jQuery was loaded first, $.fn.cuiSlider is already registered too:\n  $('#my-input').cuiSlider({ min: 0, max: 100, value: 50 });\n</script>\n```\n\nEvery version published to npm is automatically mirrored on jsDelivr and\nunpkg — no separate publish step. Pin an exact version\n(`@cliqthemes/cliq-slider-control@0.1.0/...`) for production rather than the\nunpinned URLs above.\n\n## Quick start\n\nWorks on any `<input>` — its value stays in sync (`data-value` + `.value`),\nso it still participates in native form submission:\n\n```html\n<input id=\"volume\" type=\"text\" />\n```\n\n```js\nnew CuiSlider('#volume', { min: 0, max: 100, step: 5, value: 40 });\n```\n\nOptions can also come from `data-slider-*` attributes instead of JS:\n\n```html\n<input id=\"volume\" type=\"text\" data-slider-min=\"0\" data-slider-max=\"100\" data-slider-value=\"40\" />\n```\n\n```js\nnew CuiSlider('#volume'); // reads the data-slider-* attributes above\n```\n\n### Range (dual-handle)\n\n```js\nnew CuiSlider('#price-range', { min: 0, max: 1000, value: [200, 800] });\n```\n\n### Vertical, ticks, and a custom formatter\n\n```js\nnew CuiSlider('#rating', {\n  orientation: 'vertical',\n  ticks: [0, 25, 50, 75, 100],\n  ticksLabels: ['0', '25', '50', '75', '100'],\n  value: 50,\n  formatter: (v) => `${v}%`,\n});\n```\n\n## Options\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'light'` | `'auto'` follows `prefers-color-scheme`; dark never applies unless requested |\n| `min` / `max` / `step` | `number` | `0` / `10` / `1` | Range and increment |\n| `precision` | `number \\| null` | derived from `step` | Decimal places to round displayed/stored values to |\n| `orientation` | `'horizontal' \\| 'vertical'` | `'horizontal'` | |\n| `value` | `number \\| [number, number]` | `5` | Array enables range mode automatically |\n| `range` | `boolean` | `false` | Force range mode without an array value |\n| `selection` | `'before' \\| 'after' \\| 'none'` | `'before'` | Which side of a single handle gets the filled track |\n| `tooltip` | `'show' \\| 'hide' \\| 'always'` | `'show'` | |\n| `tooltipSplit` | `boolean` | `false` | Range mode: separate tooltips per handle instead of one combined |\n| `tooltipPosition` | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| null` | `null` | Auto-picked based on orientation if unset |\n| `handle` | `'round' \\| 'triangle' \\| 'custom'` | `'round'` | `'custom'` lets you style `.cui-slider-handle-custom` yourself |\n| `reversed` | `boolean` | `false` | Flip the direction of the track |\n| `rtl` | `'auto' \\| boolean` | `'auto'` | Detected from computed `direction` when `'auto'` |\n| `enabled` | `boolean` | `true` | |\n| `formatter` | `(value) => string` | joins range as `\"a : b\"` | Formats tooltip text — see note below on the two shapes it can receive |\n| `naturalArrowKeys` | `boolean` | `false` | Flip arrow key direction for vertical/reversed sliders |\n| `ticks` / `ticksPositions` / `ticksLabels` | `number[]` / `number[]` / `string[]` | `[]` | `ticksPositions` lets ticks be spaced non-uniformly along the track |\n| `ticksSnapBounds` | `number` | `0` | Snap distance (in value units) to the nearest tick while dragging |\n| `scale` | `'linear' \\| 'logarithmic'` | `'linear'` | |\n| `rangeHighlights` | `{ start, end, class? }[]` | `[]` | Extra highlighted bands on the track |\n| `labelledby` | `string \\| [string, string] \\| null` | `null` | `aria-labelledby` for the handle(s) |\n\n### Custom number formatting (thousands/decimal separators, currency, locale)\n\n`formatter` is a plain function — the library never parses or validates its\noutput, so it has full control over how numbers are displayed: separators,\ncurrency symbols, decimal places, locale, anything:\n\n```js\n// US-style: comma thousands separator, $ prefix\nformatter: (v) => `$${v.toLocaleString('en-US')}`,\n\n// German-style: dot as thousands separator, comma as decimal separator\nformatter: (v) => new Intl.NumberFormat('de-DE').format(v),\n\n// Currency, locale-aware (symbol position, decimals, everything)\nformatter: (v) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(v),\n\n// fully manual, no Intl at all\nformatter: (v) => v.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, '.'),\n```\n\nThis is independent of `precision`/`step` (which control the *stored* value)\n— `formatter` only affects the tooltip text.\n\n### The `formatter` function's two call shapes\n\nIn range mode, the combined tooltip calls `formatter(value)` with the full\n`[low, high]` pair — but if you also turn on `tooltipSplit`, each individual\nhandle's tooltip calls `formatter(value)` with just *that handle's* plain\nnumber, so it can produce a shorter per-handle label. A `tooltipSplit`\nformatter needs to handle both:\n\n```js\nformatter: (v) => (Array.isArray(v) ? `${currency.format(v[0])} - ${currency.format(v[1])}` : currency.format(v))\n```\n\nIf you don't set `tooltipSplit`, you don't need to worry about this — the\nper-handle call is skipped entirely since those tooltips are hidden anyway.\n\n## API\n\n```js\nslider.getValue();\nslider.setValue(value, triggerSlide, triggerChange);\n\nslider.getOption();          // all options\nslider.getOption('min');     // one option\nslider.setOption('max', 200);\n\nslider.isEnabled();\nslider.enable();\nslider.disable();\nslider.toggle();\n\nslider.setTheme('dark');\nslider.relayout();           // recompute size/offset, e.g. after the container resizes\nslider.getElement();         // the rendered wrapper element\nslider.destroy();\n\nslider.on('change', ({ oldValue, newValue }) => {});\nslider.off('change', handler);\n```\n\n### Events\n\n`slide` (fires continuously while dragging/stepping), `slideStart`,\n`slideStop`, `change` (fires once the value actually settles on a new value),\n`slideEnabled`, `slideDisabled`.\n\n## Coming from bootstrap-slider?\n\nThis is a rewrite, not a drop-in replacement — a few intentional differences:\n\n- **No jQuery required.** `new CuiSlider(el, options)` works standalone; the\n  jQuery plugin (`$.fn.cuiSlider`) is an optional add-on you opt into.\n- **`getAttribute`/`setAttribute` → `getOption`/`setOption`.** Clearer names —\n  these were never about DOM attributes, just internal options.\n- **CSS classes are prefixed `cui-` instead of unprefixed** (`.cui-slider`,\n  `.cui-slider-handle`, `.cui-slider-tick`, etc.) and the visual design is a\n  fresh, flat, CSS-variable-driven theme rather than a port of the original\n  Bootstrap 3-era styling — see [Theming](#theming).\n- **camelCase JS options** (`ticksPositions`, not `ticks_positions`) — the\n  `data-slider-*` HTML attributes are unaffected and still work as before.\n\n## Theming\n\nEvery visual value is a CSS variable on `.cui-slider`. Note that\n`--cui-slider-selection-bg` only colors the *filled* side of the track —\ndon't forget `--cui-slider-track-bg` for the unfilled remainder, or most of\nthe bar will stay whatever color it already was:\n\n```css\n:root {\n  --cui-slider-track-bg: #ede9fe;\n  --cui-slider-selection-bg: #7c3aed;\n  --cui-slider-handle-border: #7c3aed;\n  --cui-slider-handle-border-focus: #a78bfa;\n}\n```\n\nDark mode is per-instance and opt-in — everything defaults to\n`theme: 'light'` regardless of OS preference:\n\n```js\nnew CuiSlider('#volume', { theme: 'dark' });  // always dark\nnew CuiSlider('#volume', { theme: 'auto' });  // follows prefers-color-scheme\nslider.setTheme('dark');                       // change it later\n```\n\n## Browser support\n\nModern evergreen browsers (Chrome, Firefox, Safari, Edge). No IE support.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-c1ba7661d699f3fa5b36fc26ab4f17f4"}