https://github.com/wdevore/color_slider_control

A custom build Dart color selector widget
https://github.com/wdevore/color_slider_control

Last synced: about 1 year ago
JSON representation

A custom build Dart color selector widget

• Host: GitHub
• URL: https://github.com/wdevore/color_slider_control
• Owner: wdevore
• License: mit
• Created: 2014-07-23T17:46:04.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2014-07-30T02:54:41.000Z (almost 12 years ago)
• Last Synced: 2023-08-06T17:10:34.389Z (almost 3 years ago)
• Language: Dart
• Size: 207 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Dart Color Slider Selector

This control creates a simple color selector where the RGB values can be selected by sliding markers. It is designed purely in CSS/SVG/Dart; there is no Canvas rendering occurring.

![Color Selector](https://raw.githubusercontent.com/wdevore/gradient_colorstops_control/master/gradient_selector.png)

##pubspec

Start by adding a dependency for the Color Selector [library](https://github.com/wdevore/color_slider_control) in pubspec.yaml

```yaml

    dependencies:

      color_slider_control:

        git: git://github.com/wdevore/color_slider_control.git

```

Import the library into your project

```dart

    import 'package:color_slider_control/color_slider_control.dart';

```

Create the color selector by instantiating the `ColorSliderWidget` object, then add it to a container element and finally call the `bind` on the color selector.

```dart

    void main() {

      ColorSliderWidget colorWidget = new ColorSliderWidget();

      _targetContainerElement = querySelector("#color_pickerId");

      _targetContainerElement.nodes.add(colorWidget.container);

      colorWidget.bind();

    }

```

The selector defaults to a light teal color.

##Design

The active `marker` is highlighted as darkgreen. Unselected `marker`s are blurred, grayscaled and translucent. The end `marker`s are highlighted in darkred and not movable.