{"id":13465631,"url":"https://github.com/Ali-Azmoud/flutter_xlider","last_synced_at":"2025-03-25T16:32:47.928Z","repository":{"id":45466591,"uuid":"172152328","full_name":"Ali-Azmoud/flutter_xlider","owner":"Ali-Azmoud","description":"A material design slider and range slider with rtl support and lots of options and customization for flutter","archived":false,"fork":false,"pushed_at":"2024-04-19T20:57:42.000Z","size":22251,"stargazers_count":508,"open_issues_count":66,"forks_count":185,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-08-01T15:03:25.210Z","etag":null,"topics":["flutter-slider","range-slider","vertical-slider"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/flutter_xlider","language":"Dart","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/Ali-Azmoud.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-02-23T00:23:57.000Z","updated_at":"2024-07-29T05:19:21.000Z","dependencies_parsed_at":"2024-06-18T15:38:50.865Z","dependency_job_id":null,"html_url":"https://github.com/Ali-Azmoud/flutter_xlider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Azmoud%2Fflutter_xlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Azmoud%2Fflutter_xlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Azmoud%2Fflutter_xlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Azmoud%2Fflutter_xlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ali-Azmoud","download_url":"https://codeload.github.com/Ali-Azmoud/flutter_xlider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222088599,"owners_count":16928984,"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":["flutter-slider","range-slider","vertical-slider"],"created_at":"2024-07-31T15:00:32.918Z","updated_at":"2024-10-29T17:31:29.043Z","avatar_url":"https://github.com/Ali-Azmoud.png","language":"Dart","funding_links":[],"categories":["Components","组件","UI [🔝](#readme)"],"sub_categories":["UI"],"readme":"# flutter_xlider\n\n\u003e Now supports null safety.\n\n(Flutter Slider) A material design slider and range slider, horizontal and vertical, with rtl support and lots of options and customizations for flutter\n\n!! **Since version 3.4.0-dev.3, step type is no longer `double`, its `FlutterSliderStep`** !!\n\n## Get Started\n\n### Single Slider\n\nA single slider\n\n```dart\nFlutterSlider(\n  values: [300],\n  max: 500,\n  min: 0,\n  onDragging: (handlerIndex, lowerValue, upperValue) {\n    _lowerValue = lowerValue;\n    _upperValue = upperValue;\n    setState(() {});\n  },\n)\n```\n\n![](images/single.gif)\n\nTo make slider `Right To Left` use `rtl: true`\n\n```dart\n FlutterSlider(\n  ...\n  rtl: true,\n  ...\n)\n```\n\n![](images/single-rtl.gif)\n\n\n### Range Slider\n\nA simple example of range slider\n\n```dart\nFlutterSlider(\n  values: [30, 420],\n  rangeSlider: true,\n  max: 500,\n  min: 0,\n  onDragging: (handlerIndex, lowerValue, upperValue) {\n    _lowerValue = lowerValue;\n    _upperValue = upperValue;\n    setState(() {});\n  },\n)\n```\n\n![](images/range-1.gif)\n\n### Vertical Axis\n\nYou can change the axis of your slider by setting `axis` to `Axis.vertical`. Default is horizontal\n```dart\nFlutterSlider(\n  ...\n  axis: Axis.vertical,\n  ...\n)\n```\n\n![](images/vertical-simple.gif) ![](images/vertical-range.gif)\n\n\n## Handlers\n\nYou can customize handlers using `handler` and `rightHandler` properties.  \nBoth `handler` and `rightHandler` accept `FlutterSliderHandler` class which has following properties:  \n\n1. `child`: is a widget\n2. `disabled`: to disable the handler\n3. `decoration`, `foregroundDecoration` and `transform` are come from `Container()` widget\n\n```dart\nFlutterSlider(\n  ...\n  handler: FlutterSliderHandler(\n    decoration: BoxDecoration(),\n    child: Material(\n      type: MaterialType.canvas,\n      color: Colors.orange,\n      elevation: 3,\n      child: Container(\n          padding: EdgeInsets.all(5),\n          child: Icon(Icons.adjust, size: 25,)),\n    ),\n  ),\n  rightHandler: FlutterSliderHandler(\n    child: Icon(Icons.chevron_left, color: Colors.red, size: 24,),\n  ),\n  ...\n)\n```\n\n\n### Handler Scale Animation\n\nYou can control the scale animation type of your handlers, it's duration and it's scale size using `handlerAnimation`    \n`handlerAnimation` accepts a `FlutterSliderHandlerAnimation` class which has 4 properties as following\n\n```dart\nFlutterSlider(\n  ...\n    handlerAnimation: FlutterSliderHandlerAnimation(\n      curve: Curves.elasticOut,\n      reverseCurve: Curves.bounceIn,\n      duration: Duration(milliseconds: 500),\n      scale: 1.5\n    ),\n  ...\n)\n```\n\n![](images/range-handler-animation.gif)\n\n**if you don't want scale animation, then just pass `1` to `scale` property**  \n**if you don't want `reverseCurve`, just ignore it. default is null**\n\n\n\n## Trackbars\n\nTo customize track bars you can use `FlutterSliderTrackBar`. [You can see the details here](https://pub.dartlang.org/documentation/flutter_xlider/latest/flutter_xlider/FlutterSliderTrackBar/FlutterSliderTrackBar.html)\n\n```dart\nFlutterSlider(\n  ...\n    trackBar: FlutterSliderTrackBar(\n      activeTrackBarHeight: 5,\n    ),\n  ...\n)\n```\n\n\n`inactiveTrackBarColor` and `activeTrackBarColor` properties are removed. use `inactiveTrackBar` and `activeTrackBar` instead.\n\n```dart\nFlutterSlider(\n  ...\n    trackBar: FlutterSliderTrackBar(\n      inactiveTrackBar: BoxDecoration(\n        borderRadius: BorderRadius.circular(20),\n        color: Colors.black12,\n        border: Border.all(width: 3, color: Colors.blue),\n      ),\n      activeTrackBar: BoxDecoration(\n        borderRadius: BorderRadius.circular(4),\n        color: Colors.blue.withOpacity(0.5)\n      ),\n    ),\n  ...\n)\n```\n\n![](images/trackbar_box_decoration.PNG)\n\n\n### Central Widget\n\nIf you want to have a widget in the middle of your slider, you can use `centralWidget`\n\n```dart\nFlutterSlider(\n  ...\n    trackBar: FlutterSliderTrackBar(\n        centralWidget: Container(\n          decoration: BoxDecoration(\n              color: trackBarColor,\n            borderRadius: BorderRadius.circular(50)\n          ),\n          width: 9,\n          height: 9,\n        ),\n    ),\n  ...\n)\n```\n\n\n## Tooltips\n\nIn order to customize your tooltips, you can use `FlutterSliderTooltip` class. [You can see all properties here](https://pub.dartlang.org/documentation/flutter_xlider/latest/flutter_xlider/FlutterSliderTooltip/FlutterSliderTooltip.html)\n\n```dart\nFlutterSlider(\n  ...\n  tooltip: FlutterSliderTooltip(\n    textStyle: TextStyle(fontSize: 17, color: Colors.white),\n    boxStyle: FlutterSliderTooltipBox(\n      decoration: BoxDecoration(\n        color: Colors.redAccent.withOpacity(0.7)\n      )\n    )\n  ),\n  ...\n)\n```\n\nHere there is a range slider with customized handlers, trackbars and tooltips\n\n![](images/range-customized.gif)\n\n### Tooltip Prefix\n\nYou can use `leftPrefix`, `leftSuffix`, `rightPrefix`, `rightSuffix` to add your desired widget around tooltip content.\n\n```dart\nFlutterSlider(\n  ...\n    tooltip: FlutterSliderTooltip(\n      leftPrefix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),\n      rightSuffix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),\n    ),\n  ...\n)\n```\n\n![](images/range-tooltip-prefix-suffix.gif)\n\n\n### Tooltip Format\n\nIf you want to change the format of the value of tooltip you can use `format` method.\n\n```dart\nFlutterSlider(\n  ...\n    tooltip: FlutterSliderTooltip(\n      format: (String value) {\n        return value + ' ! ';\n      }\n    ),\n  ...\n)\n```\n\n### Tooltip Callback\n\nIf you want to fully change tooltip widget and use your own customized widget, you can use `custom` function.\n\n```dart\nFlutterSlider(\n  ...\n    tooltip: FlutterSliderTooltip(\n      custom: (value) {\n        return Text(value.toString());\n      }\n    ),\n  ...\n)\n```\n\n\n\n### Disable Tooltip\n\nTo disable tooltips, use `disabled` in `FlutterSliderTooltip` class\n```dart\nFlutterSlider(\n  ...\n    tooltip: FlutterSliderTooltip(\n      disabled: true,\n    ),\n  ...\n)\n```\n\n### Tooltip Direction\n\nTo change the direction of the tooltip, you can use `direction`\n```dart\nFlutterSlider(\n  ...\n    tooltip: FlutterSliderTooltip(\n      direction: FlutterSliderTooltipDirection.right,\n    ),\n  ...\n)\n```\n\n### Tooltip Position Offset\n\nBy default tooltip alignment is center, but you can modify it's `top`, `left`, `right` and `bottom` by using `positionOffset`\n```dart\nFlutterSlider(\n  ...\n    tooltip: FlutterSliderTooltip(\n      positionOffset: FlutterSliderTooltipPositionOffset(\n        top: -100\n      ),\n    ),\n  ...\n)\n```\n\n\n### Always Show Tooltips\n\nTooltips always displayed if this property is set to `true`.\n\n```dart\nFlutterSlider(\n  ...\n  tooltip: FlutterSliderTooltip(\n    alwaysShowTooltip: true,\n  ),\n  ...\n)\n```\n\n\n## Controls\n\n### Handlers width and height\n\nBy default both handlers size are 35 width and height, but you can change this by `handlerWidth` and `handlerHeight`\n\n```dart\nFlutterSlider(\n  ...\n  handlerWidth: 30,\n  handlerHeight: 30,\n  ...\n)\n```\n\n### Select By Tap\n\nYou can tap on the slider to select it's value.  \nif slider is range-slider, then the closest handler to the selected point will move to that point\n\n```dart\nFlutterSlider(\n  ...\n  selectByTap: true, // default is true\n  ...\n)\n```\nif you want to move your handlers by touching and moving active TrackBar, you have to set this to `false`\n\n![](images/select-by-tap.gif)\n\n\n### Jump\n\nBy default slider handlers move fluently, if you set `jump` to true, handlers will jump between intervals\n\n```dart\nFlutterSlider(\n  ...\n  jump: true,\n  ...\n)\n```\n\n### Step\n\nThe amount the slider changes on movement can be set using `step` option\n\n```dart\nFlutterSlider(\n  ...\n  step: FlutterSliderStep(step: 1),\n  ...\n)\n```\n\n\n### Range Step\n\nIf you want to have a non-linear slider with different steps, simply use `rangeStep` feature.\n\n```dart\nFlutterSlider(\n  min: 0,\n  max: 1000000,\n  ...\n  step: FlutterSliderStep(\n    step: 1, // default\n    isPercentRange: true, // ranges are percents, 0% to 20% and so on... . default is true\n    rangeList: [\n      FlutterSliderRangeStep(from: 0, to: 20, step: 10000),\n      FlutterSliderRangeStep(from: 20, to: 100, step: 200000),\n    ]\n  ),\n  ...\n)\n```\n\n![](images/range-step.gif)\n\n### Ignore Steps\n\nIf your configurations requires that some steps are not available, you can use `ignoreSteps` property.  \nthis property accepts a simple class to define `from` and `to` ranges.\n\n```dart\nFlutterSlider(\n  ...\n    ignoreSteps: [\n      FlutterSliderIgnoreSteps(from: 8000, to: 12000),\n      FlutterSliderIgnoreSteps(from: 18000, to: 22000),\n    ],\n  ...\n)\n```\n\n![](images/range-ignore-steps.gif)\n\n\n### Fixed Values\n\nIf you want to have an array of fixed items and slide through it, you can use `fixedValues` property. use `FlutterSliderFixedValue` to add your fixed values.  \n`FlutterSliderFixedValue` has following properties:\n\n1. `percent`: (int) ( between 0..100 inclusive). the position of fixed item\n2. `value`: (dynamic) the value of fixed item\n\n* when using `fixedValues`, values of `values` property, must be within 0..100\n\n```dart\nFlutterSlider(\n  ...\n    values: [ 10, 50 ],\n    fixedValues: [\n      FlutterSliderFixedValue(percent: 0, value: \"1000\"),\n      FlutterSliderFixedValue(percent: 10, value: \"10K\"),\n      FlutterSliderFixedValue(percent: 50, value: 50000),\n      FlutterSliderFixedValue(percent: 80, value: \"80M\"),\n      FlutterSliderFixedValue(percent: 100, value: \"100B\"),\n    ],\n  ...\n)\n```\n\nusing above example, you get `(string) 10K` as `upperValue` or `lowerValue` (depends on handler), when you reach to 10 percent of the slider,\nyou get `(int) 50000` when you reach 50 percent of the slider and so on...\n \n**when using `fixedValues`, `min` and `max` are ignored**\n\n![](images/fixed-values.gif)\n\n### Minimum Distance\n\nWhen using range slider, the minimum distance between two handlers can be defined using `minimumDistance` option\n\n```dart\nFlutterSlider(\n  ...\n    minimumDistance: 300,\n  ...\n)\n```\n\n![](images/range-minimum-distance.gif)\n\n### Maximum Distance\n\nThis is the opposite of minimum distance, when using range slider, the maximum distance between two handlers can be defined using `maximumDistance` option\n\n```dart\nFlutterSlider(\n  ...\n    maximumDistance: 300,\n  ...\n)\n```\n\n![](images/range-maximum-distance.gif)\n\n\n### Locked Handlers\n\nIf you want to lock your handlers by a certain value, you can use `lockHandlers` and `lockDistance` properties\n\n```dart\nFlutterSlider(\n  ...\n    lockHandlers: true,\n    lockDistance: 50,\n  ...\n)\n```\n\n![](images/locked.gif)\n\n\n### Hatch Mark\n\nYou can display a `Hatch Mark` underneath or beside of your slider based on `axis`. In order to display hatch mark you must   \nuse `FlutterSliderHatchMark` class which has following properties:\n\n1. `linesDistanceFromTrackBar`: The distance of lines from slider. can be negative\n2. `bigLine`: The widget of big lines in hatch mark\n3. `smallLine`: The widget of small lines in hatch mark\n4. `linesAlignment`: the direct of lines, `right` or `left` which works as `top` or `bottom` on horizontal slider\n5. `density`: The amount of lines per percent. 1 is default. any number less or more than 1 will decrease and increase lines respectively\n6. `displayLines`: to display lines. by default is `false` for the sake of optimization\n\n7. `labels`: If you want to display some label or text at certain percent in your hatch mark, you can use `labels`\n8. `labelBox`: The widget of label box, however, you can define a widget for each label and have it's own style\n9. `labelsDistanceFromTrackBar`: The distance of labels from slider. can be negative\n\n10. `disabled`: to disabled the whole hatchmark ( hide )\n\n**labels alignment is center**\n\nHere is an example:\n\n```dart\nFlutterSlider(\n  ...\n    hatchMark: FlutterSliderHatchMark(\n       density: 0.5, // means 50 lines, from 0 to 100 percent\n       labels: [\n         FlutterSliderHatchMarkLabel(percent: 0, label: Text('Start')),\n         FlutterSliderHatchMarkLabel(percent: 10, label: Text('10,000')),\n         FlutterSliderHatchMarkLabel(percent: 50, label: Text('50 %')),\n         FlutterSliderHatchMarkLabel(percent: 80, label: Text('80,000')),\n         FlutterSliderHatchMarkLabel(percent: 100, label: Text('Finish')),\n       ],\n     ),\n  ...\n)\n```\n\n![](images/hatch-mark.gif)\n\n\n### Centered Origin\n\nIf you want the value of your slider originates from center of the slider, then you can use `centeredOrigin` property\n\n```dart\nFlutterSlider(\n  ...\n    centeredOrigin: true\n  ...\n  \n  ...\n    trackBar: FlutterSliderTrackBar(\n      activeTrackBar: BoxDecoration(color: trackBarColor)\n    ),\n  ...\n  \n  ...\n    onDragging: (handlerIndex, lowerValue, upperValue) {\n        if (lowerValue \u003e (max - min) / 2) {\n          trackBarColor = Colors.blueAccent;\n        } else {\n          trackBarColor = Colors.redAccent;\n        }\n        setState(() {});\n    })\n  ...\n)\n```\n\n![](images/centered.gif)\n\n\n### Touch Size\n\nYou can control how big a handler's touch area could be. by default touch size is 25\nThe range is between 5 to 50\n\n```dart\nFlutterSlider(\n  ...\n  touchSize: 25,\n  ...\n)\n```\n\nTo see the touchable area for handlers, set `visibleTouchArea` to true and test your slider\n\n\n```dart\nFlutterSlider(\n  ...\n  visibleTouchArea: true,\n  ...\n)\n```\n\n![](images/range-touchable-area.gif)\n\n### Disabled\n\nto disable your slider, you can use `disabled`. \n\n```dart\nFlutterSlider(\n  ...\n  disabled: true,\n  ...\n)\n```\n\n### RTL\n\nmakes the slider `Right To Left`\n\n```dart\nFlutterSlider(\n  ...\n  rtl: true,\n  ...\n)\n```\n\n## Events\n\nThere are 3 events\n\n`onDragStarted`: fires when drag starts  \n`onDragCompleted` fires when drag ends  \n`onDragging` keeps firing when dragging  \n\nAll three of above functions returns three values. \n```dart\n(int handlerIndex, dynamic lowerValue, dynamic upperValue)\n```\n\nFirst value is `handlerIndex`, which determines the handler. 0 is `Left Handler` and 1 refers to `Right Handler`\n\n```dart\nFlutterSlider(\n  ...\n  onDragging: (handlerIndex, lowerValue, upperValue) {\n    _lowerValue = lowerValue;\n    _upperValue = upperValue;\n    \n    if(handlerIndex == 0)\n        print(\" Left handler \");\n    \n    setState(() {});\n  },\n  ...\n)\n```\n\n\n## Working with Dates\n\nWorking with dates are simple and straightforward. just pass standard unix timestamp as values like so:\n\n```dart\nFlutterSlider(\n  ...\n  values: [\n    new DateTime(2019,6,1,0,0,0).millisecondsSinceEpoch.toDouble(), // lower date : 2019-06-01\n    new DateTime(2019,9,1,0,0,0).millisecondsSinceEpoch.toDouble(), // upper date : 2019-09-01\n  ],\n  min: new DateTime(2019,1,1,0,0,0).millisecondsSinceEpoch.toDouble(), // start date : 2019-01-01\n  max: new DateTime(2020,1,1,0,0,0).millisecondsSinceEpoch.toDouble(), // finish date : 2020-01-01\n  step: FlutterSliderStep(step: 86400), // 1 day\n  ...\n\n  ...\n  tooltip: FlutterSliderTooltip(\n    custom: (value) {\n      DateTime dtValue = DateTime.fromMillisecondsSinceEpoch(value.toInt());\n      String valueInTime = dtValue.year.toString() + '-' + dtValue.month.toString() + '-' + dtValue.day.toString();\n      \n      return Text( valueInTime );\n    }\n  )\n  ...\n\n)\n```\n![](images/wwd.png)\n\n\n## Showcase\n\nIt's exciting to see what you've build using this package.  \nOpen `wiki` tab, create a page and share your code and image of your slider with us. Thank you   \n\nHere are some examples of what you can make using this package:  \n\n![Alphabet Range](https://github.com/Ali-Azmoud/flutter_xlider/blob/master/wiki-images/alphabet.gif)  \n![Waves](https://github.com/Ali-Azmoud/flutter_xlider/blob/master/wiki-images/waves.gif)  \n![Dirty Dial](https://github.com/Ali-Azmoud/flutter_xlider/blob/master/wiki-images/dirtydial.gif)  \n![Alone in the Dark](https://github.com/Ali-Azmoud/flutter_xlider/blob/master/wiki-images/aloneinthedark.gif)  \n\nYou can find the source code in the `wiki` tab.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAli-Azmoud%2Fflutter_xlider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAli-Azmoud%2Fflutter_xlider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAli-Azmoud%2Fflutter_xlider/lists"}