{"id":15063538,"url":"https://github.com/mdbootstrap/react-slider","last_synced_at":"2026-01-28T04:03:45.546Z","repository":{"id":59862459,"uuid":"538833492","full_name":"mdbootstrap/react-slider","owner":"mdbootstrap","description":"Responsive React Sliders built with Bootstrap 5. Range slider bar with label or a carousel image slider? No matter what you are looking for, we've got you covered.","archived":false,"fork":false,"pushed_at":"2022-09-20T07:33:54.000Z","size":270,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-02-26T05:11:20.338Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","html","jsx","react","react-bootstrap","react-slider"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/react/extended/slider/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-20T06:03:30.000Z","updated_at":"2022-09-20T07:34:56.000Z","dependencies_parsed_at":"2022-09-25T10:40:27.907Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/react-slider","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/react-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243761979,"owners_count":20343971,"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","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":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","html","jsx","react","react-bootstrap","react-slider"],"created_at":"2024-09-25T00:04:22.061Z","updated_at":"2026-01-28T04:03:45.504Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"Responsive React Sliders built with Bootstrap 5. Range slider bar with label or a carousel image slider? No matter what you are looking for, we've got you covered.\n\nCheck out [React Bootstrap Slider Documentation](https://mdbootstrap.com/docs/react/extended/slider/) for detailed instructions \u0026 even more examples.\n\n\u003e :warning: **Important!**:The term \"Bootstrap Slider\" is currently very ambiguous. There are two distinct components, that are both colloquially referred to as \"Slider\" by some developers. We created this page to help you find the proper component that you are looking for. You will find more examples of each one in the main documentation pages that are linked below.\n\n\n## Range Slider\n\nIf you were looking for something that looks like the \"slider\" below, check out the [Range Slider](https://mdbootstrap.com/docs/react/forms/range/) documentation, for more examples \u0026 customization options for this component.\n\n![React Bootstrap Slider](https://mdbootstrap.com/img/Marketing/github/slider/basic.png)\n\n```js\nimport React from \"react\";\nimport { MDBRange } from \"mdb-react-ui-kit\";\n\nexport default function App() {\n  return (\n    \u003cMDBRange defaultValue={50} id=\"customRange\" label=\"Example range\" /\u003e\n  );\n}\n\n```\n\n## Carousel Slider\n\nIf you were looking for something that looks like the \"slider\" below, check out the [Carousel Slider](https://mdbootstrap.com/docs/react/components/carousel/) documentation, for more examples \u0026 customization options for this component.\n\n![React Bootstrap Slider](https://mdbootstrap.com/img/Marketing/github/slider/basic2.png)\n\n```js\nimport React from \"react\";\nimport { MDBCarousel, MDBCarouselItem } from \"mdb-react-ui-kit\";\n\nexport default function CarouselSlider() {\n  return (\n    \u003cMDBCarousel showIndicators showControls fade\u003e\n      \u003cMDBCarouselItem\n        className=\"w-100 d-block\"\n        itemId={1}\n        src=\"https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg\"\n        alt=\"...\"\n      \u003e\n        \u003ch5\u003eFirst slide label\u003c/h5\u003e\n        \u003cp\u003eNulla vitae elit libero, a pharetra augue mollis interdum.\u003c/p\u003e\n      \u003c/MDBCarouselItem\u003e\n\n      \u003cMDBCarouselItem\n        className=\"w-100 d-block\"\n        itemId={2}\n        src=\"https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg\"\n        alt=\"...\"\n      \u003e\n        \u003ch5\u003eSecond slide label\u003c/h5\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\u003c/p\u003e\n      \u003c/MDBCarouselItem\u003e\n\n      \u003cMDBCarouselItem\n        className=\"w-100 d-block\"\n        itemId={3}\n        src=\"https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg\"\n        alt=\"...\"\n      \u003e\n        \u003ch5\u003eThird slide label\u003c/h5\u003e\n        \u003cp\u003e\n          Praesent commodo cursus magna, vel scelerisque nisl consectetur.\n        \u003c/p\u003e\n      \u003c/MDBCarouselItem\u003e\n    \u003c/MDBCarousel\u003e\n  );\n}\n```\n\n## How to use?\n\n1. Download MDB React - free UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n\n\n\n___\n\n## More extended Bootstrap documentation\n\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/code/\"\u003eReact Bootstrap Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gallery/\"\u003eReact Bootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/hamburger-menu/\"\u003eReact Bootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/jumbotron/\"\u003eReact Bootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/maps/\"\u003eReact Bootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/mega-menu//\"\u003eReact Bootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/media-object/\"\u003eReact Bootstrap Media object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/multiselect/\"\u003eReact Bootstrap Multiselect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/masonry/\"\u003eReact Bootstrap Masonry\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/contact/\"\u003eReact Bootstrap Contact form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gradients/\"\u003eReact Bootstrap Gradients\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/pagination/\"\u003eReact Bootstrap Pagination\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/panels/\"\u003eReact Bootstrap Panels\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/social-media/\"\u003eReact Bootstrap Social Media icons \u0026 buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/search/\"\u003eReact Bootstrap Search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-sort/\"\u003eReact Bootstrap Table sort\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-responsive/\"\u003eReact Bootstrap Table responsive\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-scroll/\"\u003eReact Bootstrap Table scroll\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-search/\"\u003eReact Bootstrap Table search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/textarea/\"\u003eReact Bootstrap Textarea\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/sidebar/\"\u003eReact Bootstrap Sidebar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/profiles/\"\u003eReact Bootstrap Profiles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/\"\u003eReact Bootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/\"\u003eReact Bootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/back-to-top\"\u003eReact Scroll Back to Top button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/product-cards\"\u003eReact Product Cards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/avatar\"\u003eReact Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/carousel-with-thumbnails\"\u003eReact Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/chat\"\u003eReact Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comparison-table\"\u003eReact Comparison table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comments\"\u003eReact Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/drawer\"\u003eReact Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/faq\"\u003eReact FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/invoice\"\u003eReact Invoice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/news-feed\"\u003eReact News feed\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/offcanvas\"\u003eReact Offcanvas\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/order-details\"\u003eReact Order details\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/page-transitions\"\u003eReact Page transitions\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/quotes\"\u003eReact Quotes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/payment-forms\"\u003eReact Payment forms\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/select-with-custom-input\"\u003eReact Select with custom Input\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/square-buttons\"\u003eReact Square Buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/testimonial-slider\"\u003eReact Testimonial Slider\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/testimonials\"\u003eReact Testimonials / Reviews\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-survey-form\"\u003eReact Survey form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/timeline\"\u003eReact Timeline\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/to-do-list\"\u003eReact To Do List\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/padding\"\u003eReact Padding\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/modal-size\"\u003eReact Modal Size\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/modal-backdrop\"\u003eReact Modal Backdrop\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/css-text-animations\"\u003eReact CSS Text Animations\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/video\"\u003eReact Video\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/modal-methods\"\u003eReact Modal Show, Close, Hide \u0026 Toggle\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/card-deck\"\u003eReact Card deck\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-filter\"\u003eReact Table filter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/slider\"\u003eReact Slider\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Freact-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-slider/lists"}