{"id":20607515,"url":"https://github.com/loopj/jquery-simple-slider","last_synced_at":"2025-04-06T06:12:19.761Z","repository":{"id":4767583,"uuid":"5918561","full_name":"loopj/jquery-simple-slider","owner":"loopj","description":"Unobtrusive numerical slider plugin for jQuery","archived":false,"fork":false,"pushed_at":"2023-08-03T17:00:36.000Z","size":43,"stargazers_count":197,"open_issues_count":71,"forks_count":113,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-13T22:05:49.673Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loopj.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":"2012-09-23T01:39:44.000Z","updated_at":"2024-06-19T00:05:00.955Z","dependencies_parsed_at":"2024-06-19T00:04:57.747Z","dependency_job_id":"b9de03e3-4e3c-4f33-88ee-e1677a77adbe","html_url":"https://github.com/loopj/jquery-simple-slider","commit_stats":{"total_commits":27,"total_committers":4,"mean_commits":6.75,"dds":0.2962962962962963,"last_synced_commit":"71115d9dbf894db114bc3028116f9f02e894653f"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopj%2Fjquery-simple-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopj%2Fjquery-simple-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopj%2Fjquery-simple-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopj%2Fjquery-simple-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loopj","download_url":"https://codeload.github.com/loopj/jquery-simple-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441059,"owners_count":20939239,"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":[],"created_at":"2024-11-16T10:07:40.717Z","updated_at":"2025-04-06T06:12:19.728Z","avatar_url":"https://github.com/loopj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Simple Slider: Unobtrusive Numerical Slider\n\n## Overview\n\nSimple Slider is a jQuery plugin which allows your users to select a value\nfrom a numerical range by simply dragging a slider.\n\n## Features\n\n- Configurable without editing any JavaScript\n- No external dependencies, apart from jQuery\n- Compact size, only 4kb\n- Unobtrusive JavaScript, activate using `data-slider=\"true\"` on any input\n- Easy to skin/style purely in css, no images required\n- Slider value goes directly into your input element, for easy use in normal html forms\n- Supports both pre-defined values and a continous ranges\n- Supports smooth sliding and snap-to-value sliding\n- Supports highlighting the slider background when dragging\n\n## Screenshots\n\n![Default Slider](budget-slider.jpg)\n\nThe slider's default style, as used to select a budget on [Bugsnag](https://bugsnag.com).\n\n![Volume Slider](volume-slider.jpg)\n\nA slider using the volume style.\n\n## Installation\n\nInclude jQuery and the Simple Slider JavaScript and CSS files on your page,\nthen activate Simple Slider on your text input using the `data-slider` attribute:\n\n```html\n\u003c!-- Include jQuery --\u003e\n\u003cscript src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Include Simple Slider JavaScript and CSS --\u003e\n\u003cscript src=\"yourfiles/simple-slider.js\"\u003e\u003c/script\u003e\n\u003clink href=\"yourfiles/simple-slider.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\n\u003c!-- Activate Simple Slider on your input --\u003e\n\u003cinput type=\"text\" data-slider=\"true\"\u003e\n```\n\nYou can also manually turn any text input into a Simple Slider in JavaScript\nas follows:\n\n```javascript\n$(\"#my-input\").simpleSlider();\n```\n\n## Getting Slider Values\n\nThe value the user selects with the slider is immediately available inside the\n`value` attribute of the text input you attached the slider to. This means you\ncan include Simple Slider in your HTML forms and the the selected value will\nautomatically be send to your server when the form is submitted.\n\nIf you would like to get the slider's value using javascript, you can register\nfor the `slider:changed` event:\n\n```javascript\n$(\"#my-input\").bind(\"slider:changed\", function (event, data) {\n  // The currently selected value of the slider\n  alert(data.value);\n\n  // The value as a ratio of the slider (between 0 and 1)\n  alert(data.ratio);\n});\n```\n\n## Configuration\n\nYou can configure Simple Slider by either using `data-slider-*` unobtrusive javascript settings, or by passing in a configuration object when initializing the plugin manually.\n\n| Setting | Description | Example |\n| ------- | ----------- | ------- |\n| `data-slider-range` | The range representing the start and end of the slider. | `data-slider-range=\"10,1000\"` |\n| `data-slider-step` | The interval to move when dragging the slider. | `data-slider-step=\"100\"` |\n| `data-slider-snap` | Setting this to true makes the slider snap to each step when dragging, otherwise dragging will be continuous. | `data-slider-snap=\"true\"` |\n| `data-slider-values` | A pre-defined list of values to allow sliding for. | `data-slider-values=\"0,100,500,800,2000\"` |\n| `data-slider-equal-steps` | Setting this to true makes the spacing between each always value equal when used with `data-slider-values`. | `data-slider-equal-steps=\"true\"` |\n| `data-slider-theme` | The CSS theme to use when rendering this slider. Setting this value adds a suffix to the CSS class of the slider. | `data-slider-theme=\"volume\"` |\n| `data-slider-highlight` | Boolean for if we should highlight the background of the slider as it it dragged. | `data-slider-highlight=\"true\"` |\n\n## Events\n\nYou can bind to the following jQuery events using `bind`, for example:\n\n```javascript\n$(\"#my-input\").bind(\"slider:ready\", function (event, data) {\n  alert(\"Slider is ready to use\");\n});\n```\n\n| Event | Description |\n| ----- | ----------- |\n| `slider:ready` | Fired when the slider is loaded and attached to your input field. |\n| `slider:changed` | Fired when the value of your slider changes. |\n\nAll Simple Slider events pass 2 parameters into your function, `event` and\n`data`. `event` is a regular jQuery event object. `data` contains the\nfollowing properties:\n\n| Property | Description |\n| -------- | ----------- |\n| `value` | The current value of the slider. |\n| `ratio` | How far, as a percentage, the slider is from start to end (0 - 1). |\n| `el` | The generated outer HTML element representing the slider. |\n\n## Methods\n\n| Method | Description |\n| ------ | ----------- |\n| `selector.simpleSlider(\"setValue\", value)` | Sets the value of the slider. |\n| `selector.simpleSlider(\"setRatio\", ratio)` | Sets the ratio (see above) of the slider. |\n\n## Reporting Bugs or Feature Requests\n\nPlease report any bugs or feature requests on the github issues page for this\nproject here:\n\n\u003chttps://github.com/loopj/jquery-simple-slider/issues\u003e\n\n## License\n\nSimple Slider is released under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floopj%2Fjquery-simple-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floopj%2Fjquery-simple-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floopj%2Fjquery-simple-slider/lists"}