{"id":16427425,"url":"https://github.com/albertarakelyan/vue-double-slider","last_synced_at":"2026-06-23T17:32:17.072Z","repository":{"id":176014250,"uuid":"654852927","full_name":"AlbertArakelyan/vue-double-slider","owner":"AlbertArakelyan","description":"Custom made range slider with two thumbs for Vue. Create highly customizable double range sliders with ease.","archived":false,"fork":false,"pushed_at":"2023-06-18T10:54:35.000Z","size":240,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-03T07:44:04.720Z","etag":null,"topics":["inputrange","range-slider","slider","slider-plugin","vue","vue3"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-double-slider","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlbertArakelyan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-06-17T06:17:01.000Z","updated_at":"2024-03-15T10:19:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"7bd21a9b-6ae8-4e21-8c72-a4af5ced6e5d","html_url":"https://github.com/AlbertArakelyan/vue-double-slider","commit_stats":null,"previous_names":["albertarakelyan/vue-double-slider"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AlbertArakelyan/vue-double-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbertArakelyan%2Fvue-double-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbertArakelyan%2Fvue-double-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbertArakelyan%2Fvue-double-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbertArakelyan%2Fvue-double-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlbertArakelyan","download_url":"https://codeload.github.com/AlbertArakelyan/vue-double-slider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbertArakelyan%2Fvue-double-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34700906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"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":["inputrange","range-slider","slider","slider-plugin","vue","vue3"],"created_at":"2024-10-11T08:12:45.985Z","updated_at":"2026-06-23T17:32:17.054Z","avatar_url":"https://github.com/AlbertArakelyan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-double-slider\n\u003e Custom made range slider with two thumbs for Vue. Create highly customizable double range sliders with ease.\n\n## Install\nInstall with [npm](https://www.npmjs.com/):\n```sh\n$ npm install vue-double-slider\n```\n\n## Initialization and usage\n\n\u003csmall style=\"position: absolute; color: gray;\"\u003emain.js\u003c/small\u003e\n```js\nimport './assets/main.css'\nimport 'vue-double-slider/dist/style.css' // Add this line for using styles\n\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport router from './router'\nimport vueDoubleSlider from 'vue-double-slider' // Add this import for globally using the component\n\nconst app = createApp(App) // Add this use for globally using the component\n\napp.use(router)\napp.use(vueDoubleSlider)\n\napp.mount('#app')\n```\n\n\u003csmall style=\"position: absolute; color: gray\"\u003eComponent.vue\u003c/small\u003e\n```js\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n\nconst min = ref(10)\nconst max = ref(20)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv style=\"width: 200px;\"\u003e\n    \u003cdouble-range-slider\n      :min=\"min\"\n      :max=\"max\"\n      :min-threshold=\"0\"\n      :max-threshold=\"100\"\n      @update:min=\"value =\u003e min = +value\"\n      @update:max=\"value =\u003e max = +value\"\n    \u003e\u003c/double-range-slider\u003e\n    \u003cspan\u003e{{ min }} - {{ max }}\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## About\n\nThe Vue Double Slider package provides a customizable range slider component for Vue applications. With two thumbs, you can easily select a range of values. The component offers a wide range of customization options, including appearance, range limits, step size, and event handling.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eContributing\u003c/strong\u003e\u003c/summary\u003e\nWe welcome contributions from the community to enhance the Vue Double Slider package. If you have any bug reports, feature requests, or pull requests, please submit them to our GitHub repository. We appreciate your help in making the package even better.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eMotivation\u003c/strong\u003e\u003c/summary\u003e\nThe Vue Double Slider package aims to provide Vue developers with a user-friendly solution for creating double range sliders. Our goal is to simplify the process of adding range selection functionality to Vue projects while offering extensive customization options. With \u003cb\u003eVue Double Slider\u003c/b\u003e, you can easily create and customize double range sliders to meet your specific project requirements.\n\u003c/details\u003e\n\n---\n\n### Author\n**Albert Arakelyan**\n* [LinkedIn Profile](https://www.linkedin.com/in/albert-arakelyan/)\n* [GitHub Profile](https://github.com/ALbert2504)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbertarakelyan%2Fvue-double-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbertarakelyan%2Fvue-double-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbertarakelyan%2Fvue-double-slider/lists"}