DistanceRangeSlider

A highly customizable distance range slider widget for Flutter applications. This widget provides a visually appealing and user-friendly slider with configurable range, step size, unit text, and multiple handler icon options.

Features

  • Adjustable range with min and max values
  • Configurable step size for precise control
  • Customizable handler icons: Icon, Asset, Network, and SVG
  • Custom colors for active and inactive states
  • Support for unit text labels (e.g., 'km', 'm')
  • Callback function for real-time value updates
  • Hatch marks and labels for better readability

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_xlider: ^3.5.0
  flutter_svg: ^2.0.9

Then, run:

flutter pub get

Usage

Import the package and use the DistanceRangeSlider widget in your project:

import 'package:flutter/material.dart';
import 'package:your_package_name/distance_range_slider.dart';

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Distance Range Slider Example')),
      body: Center(
        child: DistanceRangeSlider(
          initialValue: 10.0,
          minValue: 0.0,
          maxValue: 50.0,
          step: 5.0,
          iconType: IconType.asset,
          assetPath: 'assets/custom_icon.png',
          unitText: 'km',
          activeColor: Colors.blue,
          inactiveColor: Colors.grey,
          onValueChanged: (value) => print('New value: \$value'),
        ),
      ),
    );
  }
}

Parameters

Property Type Description
initialValue double Initial value of the slider
minValue double Minimum value of the slider
maxValue double Maximum value of the slider
step double Step size between values
iconType IconType Type of icon for the slider handler (icon, asset, network, svg)
iconData IconData? IconData when using IconType.icon (default: Icons.person)
assetPath String? Path to asset image when using IconType.asset
networkUrl String? URL to network image when using IconType.network
svgPath String? Path to SVG asset when using IconType.svg
activeColor Color Color for active track and labels
inactiveColor Color Color for inactive track and labels
onValueChanged ValueChanged<double>? Callback triggered when the slider value changes
labelStyle TextStyle? Custom text style for the labels
unitText String Unit text displayed with values (e.g., 'km', 'm')

Example

Here's an example of how the slider looks with different configurations:

DistanceRangeSlider(
  initialValue: 20.0,
  minValue: 0.0,
  maxValue: 100.0,
  step: 10.0,
  iconType: IconType.svg,
  svgPath: 'assets/custom_slider.svg',
  unitText: 'm',
  activeColor: Colors.green,
  inactiveColor: Colors.grey,
  onValueChanged: (value) {
    print('Selected Distance: \$value');
  },
)

License

This package is available under the MIT license. See the LICENSE file for more details.

Libraries

distance_range_slider