{"id":13591987,"url":"https://github.com/mzusin/toolcool-range-slider","last_synced_at":"2025-08-24T11:10:20.690Z","repository":{"id":54748744,"uuid":"522429655","full_name":"mzusin/toolcool-range-slider","owner":"mzusin","description":"Responsive range slider library written in typescript and using web component technologies. Pure JavaScript without additional dependencies. It has a rich set of settings, including any number of  pointers (knobs), vertical and horizontal slider, touch, mousewheel and keyboard support, local and session storage, range dragging, and RTL support.","archived":false,"fork":false,"pushed_at":"2024-06-12T15:02:07.000Z","size":12777,"stargazers_count":92,"open_issues_count":1,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-20T14:07:43.507Z","etag":null,"topics":["2-pointers","2-pointers-range-slider","bottom-to-top","input","multi-pointer","multi-pointer-slider","plugins","range","range-dragging","range-picker","range-slider","range-slider-library","rangeslider","right-to-left","slider","slider-range"],"latest_commit_sha":null,"homepage":"https://toolcool-range-slider.mzsoft.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mzusin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-08T06:23:21.000Z","updated_at":"2025-05-17T10:28:30.000Z","dependencies_parsed_at":"2024-06-18T20:23:51.245Z","dependency_job_id":null,"html_url":"https://github.com/mzusin/toolcool-range-slider","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/mzusin/toolcool-range-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzusin%2Ftoolcool-range-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzusin%2Ftoolcool-range-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzusin%2Ftoolcool-range-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzusin%2Ftoolcool-range-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzusin","download_url":"https://codeload.github.com/mzusin/toolcool-range-slider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzusin%2Ftoolcool-range-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271851488,"owners_count":24834005,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2-pointers","2-pointers-range-slider","bottom-to-top","input","multi-pointer","multi-pointer-slider","plugins","range","range-dragging","range-picker","range-slider","range-slider-library","rangeslider","right-to-left","slider","slider-range"],"created_at":"2024-08-01T16:01:04.521Z","updated_at":"2025-08-24T11:10:20.667Z","avatar_url":"https://github.com/mzusin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Tool Cool Range Slider\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/mzusin/toolcool-range-slider)\n[![npm](https://img.shields.io/npm/dw/toolcool-range-slider)](https://www.npmjs.com/package/toolcool-range-slider)\n[![NPM](https://img.shields.io/badge/npm-range_slider-brightgreen)](https://www.npmjs.com/package/toolcool-range-slider)\n[![](https://data.jsdelivr.com/v1/package/npm/toolcool-range-slider/badge)](https://www.jsdelivr.com/package/npm/toolcool-range-slider)\n\nResponsive range slider library written in typescript and using web component technologies. Pure JavaScript without additional dependencies. It has a rich set of settings, including any number of  pointers (knobs), vertical and horizontal slider, touch, mousewheel and keyboard support, local and session storage, range dragging, and RTL support. The functionality of the library can be extended using plugins.\n\n\n## Links\n- [Website](https://toolcool-range-slider.mzsoft.org/)\n- [Documentation](https://toolcool-range-slider.mzsoft.org/pages/basic-usage.html)\n\n### Any Number of Pointers\n\nThe library supports [any number of pointers](https://toolcool-range-slider.mzsoft.org/pages/basic-usage.html) (knobs/handles): \none-pointer range slider, two-pointers range slider, or as many as you need.\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/videos/range-slider-1.gif?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/basic-usage.html)\n\n### Mobile Ready \nResponsive and mobile-ready range slider that looks good on any devices :iphone:. \nIt supports [touch, mousewheel events, and keyboard](https://toolcool-range-slider.mzsoft.org/pages/touch-and-keyboard-support.html).\n\n\n### Accessibility\nIt accessible via [ARIA-attributes](https://toolcool-range-slider.mzsoft.org/pages/accessibility.html) :shield:\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/videos/range-slider-2.gif?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/accessibility.html)\n\n\n### Marks Plugin\nRange slider library has a standalone [Marks Plugin](https://toolcool-range-slider.mzsoft.org/pages/marks-plugin.html). This allows to generate points along the slider:\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/videos/range-slider-marks.gif?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/marks-plugin.html)\n\n### ES6 JavaScript \u0026 Typescript\nThe library is built with Typescript and does not use external dependencies :unlock:. The core is 28KB minified or 9KB compressed (GZip).\n\n### Themes :art:\n\nThe library has additional [theme](https://toolcool-range-slider.mzsoft.org/pages/themes.html) plugins with a ready-made set of styles such as gradients, glass, pointer shapes and more. It's also possible to [develop your own theme](https://toolcool-range-slider.mzsoft.org/pages/css-themes.html) as an external plugin.\n\nhttps://user-images.githubusercontent.com/106236790/192861157-6bc694ee-3970-4264-b44f-5991b1511c4a.mov\n\n\n### Styles \u0026 Design\nThe library has multiple options for customizing :wrench: the appearance of the slider.\n[Width, height, border radius](https://toolcool-range-slider.mzsoft.org/pages/width-height-and-border-radius.html), [colors](https://toolcool-range-slider.mzsoft.org/pages/colors.html), hover and focus, and other properties can be customized using the slider attributes.\n\n[Images and SVGs](https://toolcool-range-slider.mzsoft.org/pages/images-and-svgs-as-pointers.html) can be used as pointers.\n\n### Direction \u0026 Orientation\nThe library supports horizontal and [vertical orientation](https://toolcool-range-slider.mzsoft.org/pages/vertical-slider.html) :globe_with_meridians:. It also supports left to right and [right to left](https://toolcool-range-slider.mzsoft.org/pages/right-to-left-support.html) directions for a horizontal slider, and top to bottom and [bottom to top](https://toolcool-range-slider.mzsoft.org/pages/vertical-slider.html) for vertical sliders.\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/img/readme/1.png?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/list-of-individual-values-and-text-data.html)\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/videos/range-slider-4.gif?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/vertical-slider.html)\n\n### Numbers, Text, or Range\n\nThe slider range can be defined by a minimum and maximum numbers. Another option is to provide a list of individual (discrete) values. Both [text :writing_hand: and numeric data](https://toolcool-range-slider.mzsoft.org/pages/list-of-individual-values-and-text-data.html) are supported.\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/img/readme/4.png?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/list-of-individual-values-and-text-data.html)\n\n### Local \u0026 Session Storage\n\nLocal storage :floppy_disk: and session storage support as a [standalone plugin](https://toolcool-range-slider.mzsoft.org/pages/storage.html). The user selection will be saved and restored after page refresh or navigation from other pages.\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/img/readme/2.png?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/storage.html)\n\n### Moving Tooltip Plugin\n\nRange slider library has a standalone **Moving Tooltip Plugin**. The plugin adds a moving tooltip to each pointer. You can change the tooltip color, size, and distance to pointer.\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/videos/moving-tooltip.gif?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/moving-tooltip-plugin.html)\n\n### Range Dragging\nThe library also supports [range dragging](https://toolcool-range-slider.mzsoft.org/pages/range-dragging.html):\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/videos/range-dragging.gif?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/moving-tooltip-plugin.html)\n\n### Origin at Center\nThe library also has an [Origin at Center Plugin](https://toolcool-range-slider.mzsoft.org/pages/origin-at-center-plugin.html). This plugin makes the origin of the pointer always in the center.\n\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/videos/origin-at-center.gif?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/origin-at-center-plugin.html)\n\n### Other Features\n- Based on web component technologies.\n- Allows programmatic attribute changes :computer:\n- Simple dynamic rendering after ajax requests or delays.\n- [Disabled/enabled](https://toolcool-range-slider.mzsoft.org/pages/disabled.html) range slider (including API).\n- Possibility to disable only one pointer.\n- [Non-linear](https://toolcool-range-slider.mzsoft.org/pages/non-linear-step.html) range slider :chart_with_downwards_trend:\n- Optional [animation](https://toolcool-range-slider.mzsoft.org/pages/animation.html) on panel click.\n- Works well with Bootstrap and other CSS frameworks :+1:\n- No CSS conflicts due to web components.\n- Automatically generated labels as a [standalone plugin](https://toolcool-range-slider.mzsoft.org/pages/auto-generated-labels.html).\n- Any number of sliders on one page.\n- Supports two (and more) [pointers overlap](https://toolcool-range-slider.mzsoft.org/pages/pointers-overlap.html), pointers [max and min distance](https://toolcool-range-slider.mzsoft.org/pages/max-and-min-pointers-distance.html).\n- The functionality of the library can be extended using [plugins](https://toolcool-range-slider.mzsoft.org/pages/javascript-plugins.html).\n- The range slide can be used in [React](https://toolcool-range-slider.mzsoft.org/pages/react-typescript.html) and other frameworks.\n- Extensive API based on TypeScript.\n[![Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/docs/img/readme/3.png?raw=true)](https://toolcool-range-slider.mzsoft.org/pages/storage.html)\n\n\n### Plugins\n- [Binding Labels Plugin](https://toolcool-range-slider.mzsoft.org/pages/auto-binding-labels.html)\n- [Auto Generated Labels Plugin](https://toolcool-range-slider.mzsoft.org/pages/auto-generated-labels.html)\n- [Moving Tooltip Plugin](https://toolcool-range-slider.mzsoft.org/pages/moving-tooltip-plugin.html)\n- [Storage Plugin](https://toolcool-range-slider.mzsoft.org/pages/storage.html)\n- [Pointer Shapes CSS Plugin](https://toolcool-range-slider.mzsoft.org/pages/pointer-shapes.html)\n- [Themes CSS Plugin](https://toolcool-range-slider.mzsoft.org/pages/themes.html)\n- [Origin at Center Plugin](https://toolcool-range-slider.mzsoft.org/pages/origin-at-center-plugin.html)\n- [Marks Plugin](https://toolcool-range-slider.mzsoft.org/pages/marks-plugin.html)\n\n## License\n\n[MIT license](https://github.com/mzusin/toolcool-range-slider/blob/main/LICENSE)\n\nIt can be used **for free** in any personal or commercial project :gift: \n\n\n[![Tool Cool Range Slider](https://github.com/mzusin/toolcool-range-slider/blob/main/examples/img/preview/toolcool-range-slider-preview-2.png?raw=true)](https://github.com/mzusin/toolcool-range-slider/blob/main/examples/3-styles.html)\n\n## React Round Slider\nTry my other project [React Round Slider](https://github.com/mzusin/react-round-slider) - an accessible and mobile-friendly React round slider library, powered by TypeScript and SVG.\n\n\u003cimg height=\"150\" src=\"https://github.com/mzusin/react-round-slider/blob/main/docs/img/preview/1-1.gif?raw=true\" /\u003e\n\n## Tool Cool Color Picker\n[Tool Cool Color Picker](https://github.com/mzusin/toolcool-color-picker) is a color picker library written in typescript and using web component technologies.\n![Tool Cool Color Picker](https://github.com/mzusin/toolcool-color-picker/blob/main/examples/img/preview/preview-1.png?raw=true)\n\n## Other Projects\n- [ミ☆ mzParticles ☆彡](https://github.com/mzusin/mz-particles) - TypeScript library for creating particle effects.\n- [mzMath](https://github.com/mzusin/mz-math) - a collection of typescript-based math helpers. \n- [mzSVG](https://github.com/mzusin/mz-svg) - TypeScript-based library for managing SVG in the browser and Node.js.\n- [React Input Number](https://github.com/mzusin/mz-react-input-number) - React component that provides a user-friendly interface for entering numerical values. \n- [Stripes Maker](https://github.com/mzusin/stripes-maker) - Node.js stripe pattern generator and maker. \n- [mzCanvas](https://github.com/mzusin/mz-canvas) - The TypeScript-based library for manipulating \u0026lt;canvas\u003e element and 2D graphics in the browser. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzusin%2Ftoolcool-range-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzusin%2Ftoolcool-range-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzusin%2Ftoolcool-range-slider/lists"}