{"id":37902452,"url":"https://github.com/loadingio/ldslider","last_synced_at":"2026-01-16T17:05:46.882Z","repository":{"id":36442620,"uuid":"168392803","full_name":"loadingio/ldslider","owner":"loadingio","description":"Slider library in Vanilla JS","archived":false,"fork":false,"pushed_at":"2023-12-09T04:42:17.000Z","size":1490,"stargazers_count":6,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-10T08:52:54.913Z","etag":null,"topics":[],"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/loadingio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-01-30T18:24:57.000Z","updated_at":"2024-12-27T12:07:18.000Z","dependencies_parsed_at":"2024-06-19T22:46:51.224Z","dependency_job_id":"11b13053-c3bb-4068-b9bf-eb239436daf6","html_url":"https://github.com/loadingio/ldslider","commit_stats":{"total_commits":73,"total_committers":1,"mean_commits":73.0,"dds":0.0,"last_synced_commit":"80db523169d810a231b950d6bbe5913b6e17e953"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/loadingio/ldslider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldslider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldslider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldslider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldslider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loadingio","download_url":"https://codeload.github.com/loadingio/ldslider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldslider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28480081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-01-16T17:05:43.578Z","updated_at":"2026-01-16T17:05:46.864Z","avatar_url":"https://github.com/loadingio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ldSlider\n\nSlider Library in Vanilla JS. Support exponential scale.\n\n\n## Usage\n\n\n1. download and include ldSlider [JS](https://github.com/loadingio/ldslider/releases/latest/download/ldrs.min.js) / [CSS](https://github.com/loadingio/ldslider/releases/latest/download/ldrs.min.css):\n\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"ldrs.css\"/\u003e\n    \u003cscript type=\"text/javascript\" src=\"ldrs.js\"\u003e\u003c/script\u003e\n\nyou an use a CDN, such as, from jsDelivr:\n\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"//cdn.jsdelivr.net/gh/loadingio/ldslider@v1.0.0/dist/ldrs.min.css\"/\u003e\n    \u003cscript type=\"text/javascript\" src=\"//cdn.jsdelivr.net/gh/loadingio/ldslider@v1.0.0/dist/ldrs.min.js\"/\u003e\n\n\n2. create a new ldslider instance for using ldSlider's API:\n\n    ldrs = new ldslider(configs);\n    ldrs.set(value);\n\nExample:\n\n    \u003cdiv class=\"ldrs\"\u003e\u003c/div\u003e\n    \u003cscript\u003e ldrs = new ldslider({root: document.querySelector('.ldrs')}); \u003c/script\u003e\n\nYou can also use an input box to initialize ldslider:\n\n    \u003cinput class=\"ldrs\" data-class=\"form-control\"\u003e\n    \u003cscript\u003e ldrs = new ldslider({root: document.querySelector('.ldrs')}); \u003c/script\u003e\n\nIn this case, a new `div` will be created and inserted before the `input` element, inherits all classes of the `input` element. The `input` element's type will be set to `hidden`.\n\nYou can use an optional `data-class` attribute in `input` to define the classes of the input element.\n\n\n## API\n\n - `set(value, forceNotify)`: set slider's value\n    - if `forceNotify` set to true, Notify listeners if value is changed.\n    - value is a number with number slider, and is `{from, to}` object with range slider.\n - `get()`: get slider's value. return number with number slider, and `{from,to}` object with range slider.\n - `setConfig(config)`: update slider's config. \n - `on(\"change\", cb(value))`: listen to value change.\n   - `value` parameter in `cb` is a number with number slider and `{from,to}` object with range slider.\n - `edit(v)`: toggle input box on (v = true) or off (v = false). auto swtich if v is undefined.\n   this only works if you init ldrs over input element.\n - `update()`: update ui. useful when your slider is out of place ( sometimes due to toggle display and set value when widget is not visible.)\n\n\n## Configuration\n\n * `root`: when the range slider kicks in.\n * `range`: true if it's a range slider.\n * `min`: minimal value\n * `max`: maximal value\n * `step`: each step when dragging\n * `from`: default value\n * `to`: default value for alternative pointer. ( only effective in range slider )\n * `exp`: setup exponential scale.\n   - `exp.percent`: when slider to move this percent ...\n   - `exp.value`: ... the value should be map to this percent. \n   - for example:\n     - {output: 0.9, input: 0.1} lets the slider to output 90% from min to max when slider is in the 10% position.\n     - {output: 0.5, input: 0.5} equals to linear scale.\n * `label`: custom label.\n   - `label.min` - text for showing in minimal value label\n   - `label.max` - text for showing in maximal value label\n   - `label.ptr(v)` - function that convert v ( value ) to the returned customized string that representing v.\n * `unit`: unit for showing in label\n\n\n## Decorating Classes\n\nAdd following css classes to decorate your range slider:\n\n * `up` - force all tips toward up.\n * `ldrs.sm` - small size slider\n * `ldrs.lg` - large size slider\n * `ldrs.auto` - adjust slider size based on context font size\n * `ldrs.auto.sm` - adjust slider size based on context font size, while make it smaller\n * `ldrs.auto.lg` - adjust slider size based on context font size, while make it larger\n\n\nSome quick and useful tweaks:\n\n * adjust label height \n\n     /* line-height for label height */\n     .ldrs .hint { line-height: 1em }\n     /* overall height is affected so we have to tweak this too */\n     .ldrs { height: calc(2.58em) + 2px) }\n\n * adjust text alignment within hint label:\n\n     /* tweak padding for text alignment. overall height part is omitted for simplicity */\n     .ldrs .hint { padding-bottom: 1px }\n\n * gap between bar and tips:\n\n     .ldrs { height: 34px; }\n     .ldrs .hint { top: 0; }\n     .ldrs .bar { top: 18px; }\n     .ldrs .p { top: 15px; }\n\n\n## Restyling with CSS Variable\n\nDefault colorschema of ldslider can be changed with CSS variables by adding `tone` class along with `ldrs` class:\n\n    \u003cdiv class=\"ldrs tone\"\u003e ... \u003c/div\u003e\n\nThere are four variables:\n\n - `--fg`: foreground color.\n - `--bg`: background color.\n - `--text`: active text color.\n - `--text-muted`: muted text color.\n\nHere is an example with blue slider bar and yellow active text:\n\n\n    .ldrs.tone {\n      --fg: #09f\n      --bg: #eee\n      --text: #ff0\n      --text-muted: #aaa\n    }\n\n\n## DOM Structure\n\n    .ldrs\n      .bar\n        .cap\n        .cap\n        .bar-inner\n          .bk\n          .fg\n          .line.p     //- indicator line for chosen value\n          .line.lock  //- indicator line for lock value\n          .hint.p     //- chosen value pointer\n      .hint.l\n      .hint.lock\n      .hint.r\n\n\n## Off Screen Rendering Issue\n\nOff screen rendering of the slider may be incorrect because we don't have the correct box size. We use ResizeObserver to redraw so you will consider using ResizeObserver Polyfill in older browser.\n\n\n## Credit\n\nTo provide a more consistent visual effect, ldslider embeds a number font directly in CSS: \n\n - [Crash Numbering Gothic](https://www.psyops.com/crash-numbering/), released under free license\n\nWe expect to replace this with a more compact font file crafted exclusively for ldslider.\n\nThe font-family value in ldrs.css is set to `ldrs-default-font` only for convenience.\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floadingio%2Fldslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floadingio%2Fldslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floadingio%2Fldslider/lists"}