Skip to content

Commit 9d155b0

Browse files
9am9am
committed
fix bugs in ctrl-slider and input-range
- The middle value should be (min + max) / 2. - Fix style break in ctrl-clamp[type=knob]v. - Remove package-lock generate by changeset release bot. - Extends @9am/tsconfig.
1 parent b257b8c commit 9d155b0

File tree

12 files changed

+110
-7065
lines changed

12 files changed

+110
-7065
lines changed

‎.changeset/popular-ads-remember.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@9am/ctrl-panel': patch
3+
---
4+
5+
Fix default value bug in ctrl-slider.

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@
55
*.log
66
*.swp
77
.DS_Store
8+
package-lock.json

‎README.md

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22
<img alt="ctrl-panel" src="https://user-images.githubusercontent.com/1435457/202668072-2d92cdc5-e723-4b1f-bc0a-b6126d5af1ba.png" width="240" />
3-
<h1>ctrl-panel</h1>
3+
<h1>&lt;ctrl-panel&gt;</h1>
44
<p>A simple control panel.</p>
55
<p>
66
<a href="https://github.com/9am/ctrl-panel/blob/main/LICENSE">
@@ -20,24 +20,28 @@
2020

2121
---
2222

23+
## Why Build This
24+
See my blog post on [9am.github.io](https://9am.github.io/)
25+
> [Every Animation Lover Needs A Control Panel](https://github.com/9am/9am.github.io/issues/10)
26+
2327
## Features
2428
- **9 custom elements** to choose.
2529
- **3 themes** out of the box.
2630
- **Control the value shape** with the template.
2731
- Customize or make your own theme with **CSS properties.**
2832

2933
## Elements
30-
| Element | Screenshot | Description | Live Demo |
31-
| ------- | ---------- | ----------- | --------- |
32-
| ctrl-panel | ---------- | The root element. | [demo](http://9am.github.io/ctrl-panel/ctrl-panel.html) |
33-
| ctrl-group | ---------- | Group ctrl-* together to shape the value. | [demo](http://9am.github.io/ctrl-panel/ctrl-group.html) |
34-
| ctrl-slider | ![slider-range](https://user-images.githubusercontent.com/1435457/203936646-0902d3d7-0994-4b8a-a1a3-20a3f5269d00.gif)</br>![slider-knob](https://user-images.githubusercontent.com/1435457/203936642-73d7487f-e619-437c-a532-fde14d711480.gif) | A numblic slider. | [demo](http://9am.github.io/ctrl-panel/ctrl-slider.html) |
35-
| ctrl-clamp | ![clamp-range](https://user-images.githubusercontent.com/1435457/203936632-fb207779-2102-412a-9506-b41829afc0f8.gif)</br>![clamp-knob](https://user-images.githubusercontent.com/1435457/203936627-f9135d59-790e-4d53-8228-7ade10f3b73d.gif) | Select a tuple low-high value. | [demo](http://9am.github.io/ctrl-panel/ctrl-clamp.html) |
36-
| ctrl-switch | ![switch-toggle](https://user-images.githubusercontent.com/1435457/203938021-5600c6e1-6f99-428c-99e9-66d204a5c6b0.gif)</br>![switch-range](https://user-images.githubusercontent.com/1435457/203938018-9f83e2b4-0868-4be1-a3db-a3e477b230e0.gif) | A ON/OFF switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-switch.html) |
37-
| ctrl-radio | ![radio](https://user-images.githubusercontent.com/1435457/203936639-a55c9232-f851-4678-ac66-3e2f1ea822cf.gif) | Multiple/Single switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-radio.html) |
38-
| ctrl-vector | ![vector](https://user-images.githubusercontent.com/1435457/203936657-13ca68fe-7c1b-4f6e-a2c1-e84bacfc829e.gif) | Select a tuple vector on a 2D surface. | [demo](http://9am.github.io/ctrl-panel/ctrl-vector.html) |
39-
| ctrl-text | ![text](https://user-images.githubusercontent.com/1435457/203936654-3a78f2df-a675-43d6-a748-ee0842081067.gif) | Text input. | [demo](http://9am.github.io/ctrl-panel/ctrl-text.html) |
40-
| ctrl-color | ![color](https://user-images.githubusercontent.com/1435457/203936634-68099376-731f-4442-aae5-918e606c4b09.gif) | Color picker. | [demo](http://9am.github.io/ctrl-panel/ctrl-color.html) |
34+
| Element | Screenshot | Varient | Description | Live Demo |
35+
| ------- | ---------- | ------- | ----------- | --------- |
36+
| ctrl-panel | ------- | ------- | The root element. | [demo](http://9am.github.io/ctrl-panel/ctrl-panel.html) |
37+
| ctrl-group | ------- | ------- | Group ctrl-* together to shape the value. | [demo](http://9am.github.io/ctrl-panel/ctrl-group.html) |
38+
| ctrl-slider | ![slider-1](https://user-images.githubusercontent.com/1435457/233948538-65ea017b-fddd-4026-a8a8-a739f199533a.gif) | ![slider-2](https://user-images.githubusercontent.com/1435457/233948534-3aa95a1c-5043-43d8-a8e7-5c81cdce2357.gif) | A numblic slider. | [demo](http://9am.github.io/ctrl-panel/ctrl-slider.html) |
39+
| ctrl-clamp | ![clamp-1](https://user-images.githubusercontent.com/1435457/233948483-22b0851b-c0d9-4ba0-82b4-5ba7993af5b4.gif) | ![clamp-2](https://user-images.githubusercontent.com/1435457/233948511-3f689958-500c-4e6a-83a2-c278cbc61b1b.gif) | Select a tuple low-high value. | [demo](http://9am.github.io/ctrl-panel/ctrl-clamp.html) |
40+
| ctrl-switch | ![switch-1](https://user-images.githubusercontent.com/1435457/233948542-e5611014-c9c9-4b3d-a2c0-be53745bd63e.gif) | ![switch-2](https://user-images.githubusercontent.com/1435457/233948545-6b2efbe3-ae87-4602-98f8-ded0537a6cae.gif) | A ON/OFF switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-switch.html) |
41+
| ctrl-radio | ![radio-1](https://user-images.githubusercontent.com/1435457/233948532-03a2f23c-41d3-4291-b8b7-fe770750b869.gif) | ![radio-2](https://user-images.githubusercontent.com/1435457/233948528-d19f430a-9681-4658-a23b-25f4f404f8e4.gif) | Multiple/Single switch. | [demo](http://9am.github.io/ctrl-panel/ctrl-radio.html) |
42+
| ctrl-vector | ![vector](https://user-images.githubusercontent.com/1435457/233948552-672f7051-f07a-4c4c-950c-f7c8e5ccb122.gif) | | Select a tuple vector on a 2D surface. | [demo](http://9am.github.io/ctrl-panel/ctrl-vector.html) |
43+
| ctrl-text | ![text](https://user-images.githubusercontent.com/1435457/233948548-1088ed00-5bba-4d52-a64c-95341679c8d0.gif) | | Text input. | [demo](http://9am.github.io/ctrl-panel/ctrl-text.html) |
44+
| ctrl-color | ![color](https://user-images.githubusercontent.com/1435457/233948524-3f5b06b2-fdbf-4586-8892-d76fc0d6cfc6.gif) | | Color picker. | [demo](http://9am.github.io/ctrl-panel/ctrl-color.html) |
4145

4246

4347
## Usage

‎lib/ctrl-clamp/style.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@
4949
}
5050
}
5151

52+
:host([orientation=v]) {
53+
& .inputs {
54+
width: var(--i-s);
55+
height: var(--i-l);
56+
}
57+
}
58+
5259
:host([type=knob]) {
5360
& .inputs {
5461
width: var(--i-m);
@@ -61,10 +68,3 @@
6168
}
6269
}
6370
}
64-
65-
:host([orientation=v]) {
66-
& .inputs {
67-
width: var(--i-s);
68-
height: var(--i-l);
69-
}
70-
}

‎lib/ctrl-slider/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export class CtrlSlider extends CtrlBase {
8888
return parseFloat(this.getAttribute('step')!) || 1;
8989
}
9090
get default(): Value {
91-
return attr2num(this.getAttribute('default'), (this.max - this.min) / 2);
91+
return attr2num(this.getAttribute('default'), (this.max + this.min) / 2);
9292
}
9393
get type(): SliderType {
9494
return <SliderType>this.getAttribute('type') || SliderType.Range;

‎lib/input-range/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export class InputRange extends InputBase {
4040
}
4141

4242
connectedCallback() {
43-
this.value = attr2num(this.getAttribute('value'), (this.max - this.min) / 2);
43+
this.value = attr2num(this.getAttribute('value'), (this.max + this.min) / 2);
4444
this.addEventListener('mousedown', this.onDragStart);
4545
this.dispatchEvent(
4646
new CustomEvent('INPUT', {

‎lib/meter-marker/style.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@
7070
}
7171
}
7272
}
73+
:host([type="knob"][orientation="v"]) {
74+
width: 100%;
75+
height: 100%;
76+
}
7377

7478
.meter {
7579
--meter-trans: rotate(calc(180deg + var(--offset-bg) * 1turn));

0 commit comments

Comments
 (0)