fork simbawus/slide-ruler and customize (upside down ruler)

Original version SlideRuler Demo

中文 README

Features

Developed with native javascript, doesn't rely on any frameworks and libraries.
Customizable colors, sizes, precision, etc.
Supports inertia and rebound for swiping meters.
Friendly API for easy use.

original	customize
!

PropTypes

Property	Type	Default	Description
handleValue	Function		get the return value
end	Function		event ended trigger
canvasWidth	Number	screen width	ruler width
canvasHeight	Number	83	ruler height
heightDecimal	Number	35	scale marks length
heightDigit	Number	18	division marks length
lineWidth	Number	2	marks width
colorDecimal	String	#E4E4E4	scale marks color
colorDigit	String	#E4E4E4	division marks color
divide	Number	10	division length of px
precision	Number	1	division value
fontSize	Number	20	scale fontSize
fontColor	String	#666666	scale fontColor
fontMarginTop	Number	35	font margin to the top
maxValue	Number	230	max value
minValue	Number	100	min value
currentValue	Number	100	current value

Getting Started

Install

yarn add slide-ruler --dev

Usage Example

Native JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="simbawu" />
    <title>Digital Keyboard</title>
  </head>
  <body>
    <div id="values"></div>
    <div id="app"></div>
    <script src="./slide-ruler.js"></script>
  </body>
</html>

//slide-ruler.js
import SlideRuler from 'slide-ruler';

function handleValue(value){
  console.log(value); //SlideRuler return value
  document.querySelector('#values').innerHTML = value;
}

new SlideRuler(
    {
        el: document.querySelector('#app'),
        maxValue: 230,
        minValue: 100,
        currentValue: 180
        handleValue: handleValue,
        precision: 1
    }
);

Vue

<template>
  <div></div>
</template>
<script>
import SlideRuler from 'slide-ruler';
export default {
  mounted () {
    this._renderSlideRuler();
  },
  methods: () {
    _renderSlideRuler() {
    	return new SlideRuler (
          {
            el: this.$el,
            maxValue: 230,
            minValue: 100,
            currentValue: 180
            end: this.end,
            handleValue: this.handleValue,
            precision: 1
          }
        );
    },

    handleValue(value) {
      console.log(value); //SlideRuler return value
    },
    end(value){
      console.log(value); //结束触发
    }
  }
}
</script>

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues,submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike.

License

The MIT License.

bxzhou2008/slide-ruler