# line-segment-slider-input

Latest version **0.1.18** (published 2020-06-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install line-segment-slider-input
pnpm add line-segment-slider-input
yarn add line-segment-slider-input
bun add line-segment-slider-input
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.18 |
| Published | 2020-06-30 |
| First published | 2019-10-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 120.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Aditya Jamuar |
| Maintainers | aditya_jamuar, garganurag893, surajahmed, theankurkedia |
| Keywords | line, line-segment-slider-input, segment, slider, input |

## Links

- npm: https://www.npmjs.com/package/line-segment-slider-input
- Repository: https://github.com/GeekyAnts/line-segment-slider-input.git
- Homepage: https://github.com/GeekyAnts/line-segment-slider-input.git#readme
- Issues: https://github.com/GeekyAnts/line-segment-slider-input.git/issues
- npm.io page: https://npm.io/package/line-segment-slider-input

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.1.18 (latest) — 2020-06-30
- 0.1.16 — 2020-06-30
- 0.1.14 — 2020-06-09
- 0.1.13 — 2020-04-28
- 0.1.12 — 2020-04-28
- 0.1.11 — 2020-04-28
- 0.1.10 — 2020-04-14
- 0.1.9 — 2020-04-10
- 0.1.8 — 2020-04-10
- 0.1.7 — 2020-04-10
- 0.1.6 — 2020-04-10
- 0.1.5 — 2020-04-10
- 0.1.4 — 2020-03-06
- 0.1.2 — 2020-02-19
- 0.1.3 — 2019-10-21
- … 2 more at https://npm.io/package/line-segment-slider-input/versions

## README

<!-- # TSDX React User Guide

Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.

> This TSDX setup is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.

> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)

## Commands

TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.

The recommended workflow is to run TSDX in one terminal:

```
npm start # or yarn start
```

This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.

Then run the example inside another:

```
cd example
npm i # or yarn to install dependencies
npm start # or yarn start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, [we use Parcel's aliasing](https://github.com/palmerhq/tsdx/pull/88/files).

To do a one-off build, use `npm run build` or `yarn build`.

To run tests, use `npm test` or `yarn test`.

## Configuration

Code quality is [set up for you](https://github.com/palmerhq/tsdx/pull/45/files) with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.

### Jest

Jest tests are set up to run with `npm test` or `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

#### Setup Files

This is the folder structure we set up for you:

```
/example
  index.html
  index.tsx       # test your component here in a demo app
  package.json
  tsconfig.json
/src
  index.tsx       # EDIT THIS
/test
  blah.test.tsx   # EDIT THIS
.gitignore
package.json
README.md         # EDIT THIS
tsconfig.json
```

#### React Testing Library

We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.

### Rollup

TSDX uses [Rollup v1.x](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.

### TypeScript

`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.

## Continuous Integration

### Travis

_to be completed_

### Circle

_to be completed_

## Optimizations

Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:

```js
// ./types/index.d.ts
declare var __DEV__: boolean;

// inside your code...
if (__DEV__) {
  console.log('foo');
}
```

You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.

## Module Formats

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.

## Using the Playground

```
cd example
npm i # or yarn to install dependencies
npm start # or yarn start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**!

## Deploying the Playground

The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):

```bash
cd example # if not already in the example folder
npm run build # builds to dist
netlify deploy # deploy the dist folder
```

Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:

```bash
netlify init
# build command: yarn build && cd example && yarn && yarn build
# directory to deploy: example/dist
# pick yes for netlify.toml
```

## Named Exports

Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.

## Including Styles

There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.

For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.

## Publishing to NPM

We recommend using https://github.com/sindresorhus/np.

## Usage with Lerna

When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.

The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.

Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.

```diff
   "alias": {
-    "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom"
+    "react": "../../../node_modules/react",
+    "react-dom": "../../../node_modules/react-dom"
   },
```

An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64) -->

# Line Segment Slider Input

A line rendering tool that can be repositioned and resized by drag and drop. Stop points may also be added in between and can be moved along the line.

![Line Segment Slider Input demo](https://media.giphy.com/media/LkkHdv6w8L3AOsXCbd/giphy.gif)


## Installation

``` $ npm install --save line-segment-slider-input ```


## Usage

```
import * as React from "react";
import * as ReactDOM from "react-dom";
import LineSegmentSliderInput from "../src/index";

type Stop = {
  position: number;
  color: string;
};

type StateType = {
  from: Array<number>;
  to: Array<number>;
  stops: Array<Stop>;
  index: number;
};
class App extends React.Component<{}, StateType> {
  constructor(props) {
    super(props);

    this.state = {
      from: [0.2, 0.2],
      to: [0.8, 0.8],
      index: -1,
      stops: [
        {
          position: 0,
          color: "white",
        },
        {
          position: 0.2,
          color: "white",
        },
        {
          position: 1,
          color: "white",
        },
      ],
    };
  }

  handleMove(type, handle) {
    if (type === "from") {
      this.setState({ from: handle });
    } else if (type === "to") {
      this.setState({ to: handle });
    } else {
      this.setState({ stops: handle });
    }
  }

  removeHandle() {
    if (this.state.index) {
      let stops = this.state.stops;

      if (!(this.state.index === 0 || this.state.index === stops.length - 1)) {
        stops.splice(this.state.index, 1);
      }

      this.setState({ stops });
    }
  }

  changeIndex(index) {
    this.setState({ index });
  }

  render() {
    return (
      <LineSegmentSliderInput
        width={500}
        height={500}
        from={this.state.from}
        to={this.state.to}
        stops={this.state.stops}
        index={this.state.index}
        changeIndex={this.changeIndex.bind(this)}
        handleMove={this.handleMove.bind(this)}
        removeHandle={this.removeHandle.bind(this)}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

```

| Property     | Type                   | Description                                                                                                                                                                                              |
| ------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| width        | number                 | Takes a numerical input which represents the width of canvas on which this svg will render.                                                                                                              |
| height       | number                 | Takes a numerical input which represents the height of canvas on which this svg will render.                                                                                                             |
| from         | Array                  | Takes an array of numbers of size 2 that represent the starting point of the line in fraction of the total width and height.                                                                             |
| to           | Array                  | Takes an array of numbers of size 2 that represent the ending point of the line in fraction of the total width and height.                                                                               |
| stops        | Array                  | Takes an array of objects that have properties ** position ** and ** color **. Position represents the ratio of distance between the start point and that point to that of the total length of the line. |
| index        | number                 | It represents the index of circle that is currently active                                                                                                                                               |
| changeIndex  | function(index)        | This can be used to change the active index in the parent component                                                                                                                                      |
| handleMove   | function(type, handle) | This can be used to change the value of stops or the edges. type can be **from**, **to** or **other**. **other** returns an array of stops and can be used to change the array of stops.                 |
| removeHandle | function()             | This removes the active handle if it isn't the start or the end point. It is triggered when someone pressed **delete** key.                                                                              |

---
_Source: https://npm.io/package/line-segment-slider-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._