🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

slide-ruler

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

slide-ruler

SlideRuler Component 滑尺数值选择器

latest
Source
npmnpm
Version
1.2.2
Version published
Weekly downloads
142
8.4%
Maintainers
1
Weekly downloads
 
Created
Source

SlideRuler Demo

Build Status npm npm npm

中文 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.

example

PropTypes

PropertyTypeDefaultDescription
handleValueFunctionget the return value
canvasWidthNumberscreen widthruler width
canvasHeightNumber83ruler height
heightDecimalNumber35scale marks length
heightDigitNumber18division marks length
lineWidthNumber2marks width
colorDecimalString#E4E4E4scale marks color
colorDigitString#E4E4E4division marks color
divideNumber10division length of px
precisionNumber1division value
fontSizeNumber20scale fontSize
fontColorString#666666scale fontColor
fontMarginTopNumber35font margin to the top
maxValueNumber230max value
minValueNumber100min value
currentValueNumber100current 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
    }
);
  • React
import React from 'react';
import SlideRuler from 'slide-ruler';

class SlideRulerPage extends React.Component {

  constructor(){
    super();

    this.handleValue = this.handleValue.bind(this);
    this._renderSlideRuler = this._renderSlideRuler.bind(this);
  }

  componentDidMount(){
    this._renderSlideRuler();
  }

  handleValue(value){
    console.log(value); //SlideRuler return value
  }

  _renderSlideRuler(){
    return new SlideRuler (
      {
        el: this.refs.slideRuler,
        maxValue: 230,
        minValue: 100,
        currentValue: 180
        handleValue: handleValue,
        precision: 1
      }
    );
  }

  render(){
    return (
      <div ref='slideRuler'></div>
    )
  }
}

export default SlideRulerPage;
  • 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
            handleValue: handleValue,
            precision: 1
          }
        );
    },

    handleValue(value) {
      console.log(value); //SlideRuler return value
    }
  }
}
</script>
  • Angular
import { Component, ViewChild, OnInit, ViewEncapsulation} from '@angular/core';
import SlideRuler from 'slide-ruler';

@Component({
  selector: 'my-app',
  template: `
   <div #slideRuler></div>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  implements OnInit{

  @ViewChild('slideRuler') slideRuler;

  ngOnInit(){
    this._renderSlideRuler();
  }

  _renderSlideRuler(){
    return new SlideRuler (
          {
            el: this.slideRuler.nativeElement,
            maxValue: 230,
            minValue: 100,
            currentValue: 180
            handleValue: handleValue,
            precision: 1
          }
        );
  }

  handleValue(value) {
    console.log(value); //SlideRuler return value
  }
}

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.

Keywords

slide
ruler
slideRuler
browser
webpack
simbawu

FAQs

Package last updated on 08 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Introducing Repository Access Permissions and Custom Roles

Product

Introducing Repository Access Permissions and Custom Roles

Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.

By Joe Werle  -  Jun 19, 2026