{"id":14974353,"url":"https://github.com/kdn0325/react-native-gradient-multi-slider","last_synced_at":"2025-10-27T06:32:20.902Z","repository":{"id":221178507,"uuid":"753658576","full_name":"kdn0325/react-native-gradient-multi-slider","owner":"kdn0325","description":"Do you want to make sliders using Gradient in React Native? This library makes it easy to make","archived":false,"fork":false,"pushed_at":"2024-03-11T13:08:02.000Z","size":3477,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T03:24:04.627Z","etag":null,"topics":["react-native","react-native-gradient","react-native-slider"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-gradient-multi-slider","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/kdn0325.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","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}},"created_at":"2024-02-06T14:56:55.000Z","updated_at":"2024-05-22T21:31:15.000Z","dependencies_parsed_at":"2024-02-06T16:38:08.817Z","dependency_job_id":null,"html_url":"https://github.com/kdn0325/react-native-gradient-multi-slider","commit_stats":null,"previous_names":["kdn0325/react-native-gradient-multi-slider"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-gradient-multi-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-gradient-multi-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-gradient-multi-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-gradient-multi-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kdn0325","download_url":"https://codeload.github.com/kdn0325/react-native-gradient-multi-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238455170,"owners_count":19475405,"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":["react-native","react-native-gradient","react-native-slider"],"created_at":"2024-09-24T13:50:26.533Z","updated_at":"2025-10-27T06:32:15.306Z","avatar_url":"https://github.com/kdn0325.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-gradient-multi-slider\n\nPure JS react native slider component with one or two markers.\nOptions to customize track, touch area and provide customer markers and callbacks for touch events and value changes.\n\n## Examples\n\n```\ncd example/Basic\nnpm install\nreact-native run-ios\nreact-native run-android\n```\n![Example](https://github.com/kdn0325/react-native-gradient-multi-slider/assets/91298955/ac39fff7-8ece-4488-a383-77da06a66f77)\n\n## Getting Started\n\n- [Installation](#installation)\n\n### Installation\n\n```bash\n$ npm install --save react-native-gradient-multi-slider\n$ yarn add -D react-native-gradient-multi-slider\n```\n\n### Usage in a ScrollView\n\n```js\nimport MultiSlider from 'react-native-gradient-multi-slider';\n\n\u003cMultiSlider\n    sliderLength={250}\n    min={0}\n    max={12}\n    step={1}\n/\u003e\n```\n### shape up CustomMarker as left and right\n\nIn order to make different styles on markers you can set isMarkersSeparated to true, define customMarkerLeft and customMarkerRight in MultiSlider. for example:\n\n\n```js\n\u003cMultiSlider\n    ...\n    isMarkersSeparated={true}\n\n    customMarkerLeft={(e) =\u003e {\n         return (\u003cCustomSliderMarkerLeft\n          currentValue={e.currentValue}/\u003e)\n    }}\n\n    customMarkerRight={(e) =\u003e {\n         return (\u003cCustomSliderMarkerRight\n         currentValue={e.currentValue}/\u003e)\n    }}\n/\u003e\n```\n\n### Partial report of the props\nFeel free to contribute to this part of the documentation.\n\n\n| Prop Name            | Default | Type    | Purpose                                  |\n|----------------------|---------|---------|------------------------------------------|\n| values               | [0]     | Array   | Prefixed values of the slider            |\n| gradientColors       | #...    | Array   | Gradient colors for slider track         |\n| onValuesChangeStart  | () =\u003e {}| Function| Callback when value starts changing      |\n| onValuesChange       | () =\u003e {}| Function| Callback when value changes              |\n| onValuesChangeFinish| () =\u003e {}| Function| Callback when value stops changing       |\n| sliderLength         | 280     | Number  | Length of the slider                     |\n| touchDimensions      | {...}   | Object  | Touch dimensions configuration           |\n| enableLabel          |         | Function| Enable label rendering                   |\n| customLabel          |         | Function| Component for rendering label above      |\n| customMarker         |         | Function| Component for cursor                     |\n| customMarkerLeft     |         | Function| Component for left cursor                |\n| customMarkerRight    |         | Function| Component for right cursor               |\n| isMarkersSeparated   |         | Boolean | Explanation in README.md                |\n| min                  | 0       | Number  | Minimum value available in slider        |\n| max                  | 10      | Number  | Maximum value available in slider        |\n| step                 | 1       | Number  | Step value of slider                     |\n| optionsArray         |         | Array   | Possible values of slider                |\n| Styles               | {...}   | Style   | Slider styles                            |\n| valuePrefix          |         | String  | Prefix added to value                    |\n| valueSuffix          |         | String  | Suffix added to value                    |\n| enabledOne           | true    | Boolean | Enables first cursor                     |\n| enabledTwo           | true    | Boolean | Enables second cursor                    |\n| stepsAs              | []      | Array   | Customize step labels                    |\n| showSteps            | false   | Boolean | Show steps                               |\n| showStepMarkers      | true    | Boolean | Show step markers on track               |\n| showStepLabels       | true    | Boolean | Show step labels underneath track        |\n| onToggleOne          |         | Function| Listener when first cursor toggles       |\n| onToggleTwo          |         | Function| Listener when second cursor toggles      |\n| allowOverlap         | false   | Boolean | Allow overlap within cursors             |\n| snapped              | false   | Boolean | Fixed position for markers               |\n| smoothSnapped        | false   | Boolean | Snap to nearest marker on release        |\n| vertical             | false   | Boolean | Use vertical orientation                 |\n| markerOffsetX        | 0       | Number  | Offset cursor(s) on X axis               |\n| markerOffsetY        | 0       | Number  | Offset cursor(s) on Y axis               |\n| markerSize           | 0       | Number  | Marker margin from track edges           |\n| minMarkerOverlap...  | 0       | Number  | Closest distance between markers (pixels)|\n| imageBackground...   |         | String  | ImageBackground source                   |\n| testID               |         | String  | Used in end-to-end tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdn0325%2Freact-native-gradient-multi-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkdn0325%2Freact-native-gradient-multi-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdn0325%2Freact-native-gradient-multi-slider/lists"}