{"id":16483449,"url":"https://github.com/wusb/slide-ruler","last_synced_at":"2025-04-04T14:06:26.023Z","repository":{"id":38315931,"uuid":"116109653","full_name":"wusb/slide-ruler","owner":"wusb","description":"📏 Slide Ruler 滑尺数值选择器","archived":false,"fork":false,"pushed_at":"2023-04-08T08:12:32.000Z","size":2023,"stargazers_count":331,"open_issues_count":23,"forks_count":56,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-12T13:13:56.252Z","etag":null,"topics":["components","javascirpt","ruler","slide","slide-ruler"],"latest_commit_sha":null,"homepage":"https://wusb.github.io/slide-ruler","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wusb.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-01-03T08:03:47.000Z","updated_at":"2024-09-20T10:06:04.000Z","dependencies_parsed_at":"2023-07-21T15:36:06.909Z","dependency_job_id":null,"html_url":"https://github.com/wusb/slide-ruler","commit_stats":null,"previous_names":["simbawus/slide-ruler"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wusb%2Fslide-ruler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wusb%2Fslide-ruler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wusb%2Fslide-ruler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wusb%2Fslide-ruler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wusb","download_url":"https://codeload.github.com/wusb/slide-ruler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190224,"owners_count":20898699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","javascirpt","ruler","slide","slide-ruler"],"created_at":"2024-10-11T13:14:00.877Z","updated_at":"2025-04-04T14:06:26.005Z","avatar_url":"https://github.com/wusb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SlideRuler [Demo](https://wusb.github.io/slide-ruler)\n\n[![Build Status](https://travis-ci.org/wusb/slide-ruler.svg?branch=master)](https://travis-ci.org/wusb/slide-ruler)\n[![npm](https://img.shields.io/npm/v/slide-ruler.svg)](https://www.npmjs.com/package/slide-ruler)\n[![npm](https://img.shields.io/npm/dt/slide-ruler.svg)](https://www.npmjs.com/package/slide-ruler)\n[![npm](https://img.shields.io/npm/l/slide-ruler.svg)](https://www.npmjs.com/package/slide-ruler)\n\n###### [README in English](README.md)\n\n- 原生 js 开发、不依赖任何框架和库的轻量级移动端数字键盘\n- 可自定义尺子颜色、尺寸及精度等\n- 支持惯性及弹性\n- API 简洁，非常好上手\n\n![example](https://i.loli.net/2018/06/27/5b3350dd2c4cc.gif)\n\n## 属性\n\n| Property      | Type     | Default      | Description              |\n| :------------ | :------- | :----------- | :----------------------- |\n| handleValue   | Function |              | 获取尺子当前值           |\n| canvasWidth   | Nubmer   | screen width | 尺子宽度                 |\n| canvasHeight  | Nubmer   | 83           | 尺子高度                 |\n| heightDecimal | Nubmer   | 35           | 长刻度线高度             |\n| heightDigit   | Nubmer   | 18           | 短刻度线高度             |\n| lineWidth     | Nubmer   | 2            | 刻度线宽度               |\n| colorDecimal  | String   | #E4E4E4      | 长刻度线颜色             |\n| colorDigit    | String   | #E4E4E4      | 短刻度线颜色             |\n| divide        | Nubmer   | 10           | 两个刻度线之间的像素宽度 |\n| precision     | Nubmer   | 1            | 最小刻度单位             |\n| fontSize      | Nubmer   | 20           | 刻度字体大小             |\n| fontColor     | String   | #666666      | 刻度字体颜色             |\n| fontMarginTop | Nubmer   | 35           | 刻度字体与上边界距离     |\n| maxValue      | Nubmer   | 230          | 尺子最大值               |\n| minValue      | Nubmer   | 100          | 尺子最小值               |\n| currentValue  | Nubmer   | 100          | 尺子当前值               |\n\n## Getting Started\n\n### Install\n\n```shell\nyarn add slide-ruler --dev\n```\n\n### Usage Example\n\n- **Native JavaScript**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"author\" content=\"simbawu\" /\u003e\n    \u003ctitle\u003eDigital Keyboard\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"values\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003cscript src=\"./slide-ruler.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\n//slide-ruler.js\nimport SlideRuler from 'slide-ruler';\n\nfunction handleValue(value){\n  console.log(value); //SlideRuler return value\n  document.querySelector('#values').innerHTML = value;\n}\n\nnew SlideRuler(\n    {\n        el: document.querySelector('#app'),\n        maxValue: 230,\n        minValue: 100,\n        currentValue: 180\n        handleValue: handleValue,\n        precision: 1\n    }\n);\n```\n\n- **React**\n\n```jsx\nimport React from 'react';\nimport SlideRuler from 'slide-ruler';\n\nclass SlideRulerPage extends React.Component {\n\n  constructor(){\n    super();\n\n    this.handleValue = this.handleValue.bind(this);\n    this._renderSlideRuler = this._renderSlideRuler.bind(this);\n  }\n\n  componentDidMount(){\n    this._renderSlideRuler();\n  }\n\n  handleValue(value){\n    console.log(value); //SlideRuler return value\n  }\n\n  _renderSlideRuler(){\n    return new SlideRuler (\n      {\n        el: this.refs.slideRuler,\n        maxValue: 230,\n        minValue: 100,\n        currentValue: 180\n        handleValue: handleValue,\n        precision: 1\n      }\n    );\n  }\n\n  render(){\n    return (\n      \u003cdiv ref='slideRuler'\u003e\u003c/div\u003e\n    )\n  }\n}\n\nexport default SlideRulerPage;\n```\n\n- **Vue**\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport SlideRuler from 'slide-ruler';\nexport default {\n  mounted () {\n    this._renderSlideRuler();\n  },\n  methods: () {\n    _renderSlideRuler() {\n    \treturn new SlideRuler (\n          {\n            el: this.$el,\n            maxValue: 230,\n            minValue: 100,\n            currentValue: 180\n            handleValue: handleValue,\n            precision: 1\n          }\n        );\n    },\n\n    handleValue(value) {\n      console.log(value); //SlideRuler return value\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n- **Angular**\n\n```typescript\nimport { Component, ViewChild, OnInit, ViewEncapsulation} from '@angular/core';\nimport SlideRuler from 'slide-ruler';\n\n@Component({\n  selector: 'my-app',\n  template: `\n   \u003cdiv #slideRuler\u003e\u003c/div\u003e\n  `,\n  encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent  implements OnInit{\n\n  @ViewChild('slideRuler') slideRuler;\n\n  ngOnInit(){\n    this._renderSlideRuler();\n  }\n\n  _renderSlideRuler(){\n    return new SlideRuler (\n          {\n            el: this.slideRuler.nativeElement,\n            maxValue: 230,\n            minValue: 100,\n            currentValue: 180\n            handleValue: handleValue,\n            precision: 1\n          }\n        );\n  }\n\n  handleValue(value) {\n    console.log(value); //SlideRuler return value\n  }\n}\n```\n\n## How to Contribute\n\nAnyone and everyone is welcome to contribute to this project. The best way to start is by checking our [open issues](https://github.com/wusb/slide-ruler/issues),[submit a new issues](https://github.com/wusb/slide-ruler/issues/new?labels=bug) or [feature request](https://github.com/wusb/slide-ruler/issues/new?labels=enhancement), participate in discussions, upvote or downvote the issues you like or dislike.\n\n## License\n\n[**The MIT License**](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwusb%2Fslide-ruler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwusb%2Fslide-ruler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwusb%2Fslide-ruler/lists"}