{"id":17377447,"url":"https://github.com/artoonie/timeline-range-slider","last_synced_at":"2025-04-15T08:57:12.822Z","repository":{"id":49022312,"uuid":"333062486","full_name":"artoonie/timeline-range-slider","owner":"artoonie","description":"A customizable range slider with a built-in timeline","archived":false,"fork":false,"pushed_at":"2021-06-30T20:28:30.000Z","size":243,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T08:57:07.168Z","etag":null,"topics":["range-slider","slider","slider-component","timeline","timeline-component"],"latest_commit_sha":null,"homepage":"","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/artoonie.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}},"created_at":"2021-01-26T11:24:10.000Z","updated_at":"2022-02-08T06:51:24.000Z","dependencies_parsed_at":"2022-08-27T22:54:17.276Z","dependency_job_id":null,"html_url":"https://github.com/artoonie/timeline-range-slider","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artoonie%2Ftimeline-range-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artoonie%2Ftimeline-range-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artoonie%2Ftimeline-range-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artoonie%2Ftimeline-range-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artoonie","download_url":"https://codeload.github.com/artoonie/timeline-range-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249040047,"owners_count":21202813,"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":["range-slider","slider","slider-component","timeline","timeline-component"],"created_at":"2024-10-16T05:22:09.445Z","updated_at":"2025-04-15T08:57:12.801Z","avatar_url":"https://github.com/artoonie.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A lightweight range slider with expandable timeline\n\nSee this project at [artoonie.github.io/timeline-range-slider](https://artoonie.github.io/timeline-range-slider)\n\nThe project page has dynamic sliders you can interact with.\n\n![Node.js CI](https://github.com/artoonie/timeline-range-slider/workflows/Node.js%20CI/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/artoonie/timeline-range-slider/badge.svg?branch=main)](https://coveralls.io/github/artoonie/timeline-range-slider?branch=main)\n![npm bundle size](https://img.shields.io/bundlephobia/min/@artoonie/timeline-range-slider)\n![npm](https://img.shields.io/npm/dm/@artoonie/timeline-range-slider)\n\n\n# A lightweight, dependency-free range slider\n\nThe default configuration gives you a slider with a collapsible timeline:\n\n[\\[interactive demo\\]](https://artoonie.github.io/timeline-range-slider)\n![ex0](docs/images/ex0.png)\n\n## Features \u0026 Benefits\nFeatures:\n* A mobile-friendly range slider,\n* With a collapsible events timeline to list events which occurred at each index in the slider,\n* With tooltips for deeper explanations of the summaries\n\nBenefits:\n* Vanilla Javascript \u0026 CSS\n* No external libraries: no jQuery, bootstrap, Sass, etc\n* Simple javascript configuration with sane defaults\n* Simple, easy-to-override CSS\n* Permissive license\n\n## Examples\n### #1: Default\n\n[\\[interactive demo\\]](https://artoonie.github.io/timeline-range-slider)\n![ex1](docs/images/ex0.png)\n\n### #2: Dark theme\n\n[\\[interactive demo\\]](https://artoonie.github.io/timeline-range-slider)\n![ex2](docs/images/ex2.png)\n\n### #3: Small and continuous\n\n[\\[interactive demo\\]](https://artoonie.github.io/timeline-range-slider)\n![ex3](docs/images/ex3.png)\n\n### #4: Variable tick text\n\n[\\[interactive demo\\]](https://artoonie.github.io/timeline-range-slider)\n![ex4](docs/images/ex4.png)\n\n## Usage\n\n### Installation\nPick what works for your setup:\n1. `npm i @artoonie/timeline-range-slider`\n2. Download assets from [github package](https://github.com/artoonie/timeline-range-slider/packages/592040)\n3. Just download the files in the `timeline-range-slider` directory. Go on. I won't judge you.\n\n### Usage\n#### API: Vanilla Javascript\nIf you're not using node.js, functions begin with trs\\_ namespace to avoid conflicts:\n\nInclude the files in your HTML and create a wrapper div:\n```html\n\u003clink rel=\"stylesheet\" href=\"slider.css\"\u003e\n\u003cscript type=\"text/javascript\" src=\"slider.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"slide\"\u003e\u003c/div\u003e\n```\n\nCreate a slider by calling:\n```javascript\nconst config = {wrapperDivId: 'slide', numTicks: 10}\ntrs_createSliderAndTimeline(config);\n```\nadditional config options are described below.\n\nYou can a slider value manually by calling:\n```javascript\ntrs_setSliderValue('slide', 5);\n```\n\nYou can animate a slider to have it move front-to-back with\n```javascript\ntrs_animate('slide');\n```\n\nHide the timeline with:\n```javascript\ntrs_toggleTimelineVisibility('slide');\n```\n\n#### API: Using node.js\nHTML:\n```html\nconst slider = require('./timeline-range-slider/slider.js');\nrequire('./timeline-range-slider/slider.css');\n\n\u003cdiv id=\"slide\"\u003e\u003c/div\u003e\n```\n\nJavascript:\n```html\nslider.createSliderAndTimeline(config);\nslider.setSliderValue('slide', 5);\nslider.animate('slide');\nslider.toggleTimelineVisibility('slide');\n```\n\n### Configuration options\nThe `config` dictionary has the following options:\n\n| key/default | description |\n| --- | --- |\n| `wrapperDivId`\\* \u003cbr/\u003e\u003cbr/\u003e _required_ | The div id in which to place the slider |\n| `numTicks`\\* \u003cbr/\u003e\u003cbr/\u003e _required_ | The number of elements in the slider |\n| `width` \u003cbr/\u003e\u003cbr/\u003e default: `600` | The maximum width of the slider. If the page is narrower than this, the slider will responsively scale. |\n| `hideTimelineInitially` \u003cbr/\u003e\u003cbr/\u003e default: `true` | Whether or not the timeline is initially expanded or collapsed |\n| `tickLabelPrefix` \u003cbr/\u003e\u003cbr/\u003e default: `'Round '` | What does each tick represent? Placed in the header row of the timeline. |\n| `hideActiveTickText` \u003cbr/\u003e\u003cbr/\u003e default: `false` | Should we hide `tickText` on the active tick? By default, we hide the text and show a slider via CSS. Only change this if you override the CSS for the active tick. |\n| `tickText` \u003cbr/\u003e\u003cbr/\u003e default: `'•'` | The text that marks a tick in the slider. Can be a single string or a list. If it's a list, must be the size of numTicks. |\n| `color` \u003cbr/\u003e\u003cbr/\u003e default: `'orangered'` | The color of past tick marks. Can be a single string or a list. If it's a list, must be of size numTicks. |\n| `sliderValueChanged` \u003cbr/\u003e\u003cbr/\u003e default: `null` | Callback to be notified when the slider changes. |\n| `animateOnLoad` \u003cbr/\u003e\u003cbr/\u003e default: `false` | Should the slider animate all steps on load? |\n| `timeBetweenStepsMs` \u003cbr/\u003e\u003cbr/\u003e default: `1s/numTicks` | How fast should the animation run? |\n| `timelinePeeking` \u003cbr/\u003e\u003cbr/\u003e default: `true` | Should the timeline \"peek open\" during animation, and close after the animation completes? |\n| `timelineData` \u003cbr/\u003e\u003cbr/\u003e default: random data | The timeline data. See below for how to structure this. |\n| `leftArrowText` \u003cbr/\u003e\u003cbr/\u003e default: `\u003c` | What text to place in the left arrow button? |\n| `rightArrowText` \u003cbr/\u003e\u003cbr/\u003e default: `\u003c` | What text to place in the right arrow button? |\n\n#### Timeline data structure\nThe `timelineData` contains the events that occurred at each \"tick\" in the timeline.\nIt is a list of lists. Each of the `numTicks` elements contains a list of events.\nA single event is structured as follows:\n```javascript\nconst oneTimelineItem = {\n  summaryText: \"Short summary\",\n\n  /* optional */\n  className: \"custom-class-for-summary-label\",\n\n  /* optional */\n  moreInfoText: \"Description to show when hovering\" \n}\n```\n\nEach \"tick\" can have multiple events (or zero events).\n\nA complete `timelineData` structure might look like:\n```javascript\nconst timelineData = [\n    [\n        {summaryText: \"Event 1, tick 1\"},\n        {summaryText: \"Event 2, tick 1\"}\n    ],\n    [\n        {summaryText: \"Event 1, tick 2\",\n         className: \"some-class\"}\n    ],\n    [ /* No events in tick 3 */\n    ],\n    [\n        {summaryText: \"Event 1, tick 4\"},\n        {summaryText: \"Event 2, tick 4\"},\n        {summaryText: \"Event 3, tick 4\",\n         moreInfoText: \"a long description\"}\n    ]\n]\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartoonie%2Ftimeline-range-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartoonie%2Ftimeline-range-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartoonie%2Ftimeline-range-slider/lists"}