Skip to content

Commit

Permalink
Numeric slider component with variable precision (#3852)
Browse files Browse the repository at this point in the history
This `Slider` component allows adjusting a numeric value with the mouse. The value is increased or decreased by clicking on the component and dragging it to the left or right.

The `Slider` has a configurable default value. `Ctrl`+clicking on the component resets its value to that default. When the value is moved away from the default, the value is printed in **bold**.

The `Slider` precision is increased or decreased by clicking the component and dragging upward or downward. This precision influences how quickly the value changes when the mouse moves horizontally, the steps in which the value is incremented or decremented, and the number of digits used to display the value. There is a margin around the component within which the precision is not changed. Beyond this margin, the precision is increased or decreased in powers of 10 (e.g. `0.1` -> `0.01` -> `0.001` when moving the mouse downwards, or `0.1` -> `1.0` -> `10.0` when moving the mouse upwards). The margin and distance between consecutive steps along the vertical axis are configurable.

The value of the `Slider` is limited to a configurable range, and cannot be adjusted beyond that range. A colored bar fills the component to indicate the current value within the range.

#### Video demonstration

https://user-images.githubusercontent.com/117099775/202244982-2f6f419d-7281-41f6-8607-7e492ad25b46.mp4

#### Future additions
This is the first iteration of the `Slider` component. Additional features are planned for the future:
* Textual editing of the value.
* Improved visual feedback on precision changes.
* Additional out-of-range behaviors.
  • Loading branch information
galin-enso authored Nov 24, 2022
1 parent 5b434d1 commit 4ae2cb1
Show file tree
Hide file tree
Showing 8 changed files with 778 additions and 36 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@
JavaScript DOM events][3863]. The events system implements very similar
behavior to the one described here:
https://javascript.info/bubbling-and-capturing.
- [Added a new component: Slider][3852]. It allows adjusting a numeric value
with the mouse. The precision of these adjustments can be increased or
decreased.

#### Enso Standard Library

Expand Down Expand Up @@ -384,6 +387,7 @@
[3782]: https://github.com/enso-org/enso/pull/3782
[3863]: https://github.com/enso-org/enso/pull/3863
[3874]: https://github.com/enso-org/enso/pull/3874
[3852]: https://github.com/enso-org/enso/pull/3852
[3841]: https://github.com/enso-org/enso/pull/3841

#### Enso Compiler
Expand Down
12 changes: 11 additions & 1 deletion Cargo.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion build-config.yaml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Options intended to be common for all developers.

wasm-size-limit: 14.9 MiB
wasm-size-limit: 14.95 MiB

required-versions:
cargo-watch: ^8.1.1
Expand Down
11 changes: 11 additions & 0 deletions lib/rust/ensogl/component/slider/Cargo.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
[package]
name = "ensogl-slider"
version = "0.1.0"
authors = ["Enso Team <[email protected]>"]
edition = "2021"

[dependencies]
enso-frp = { path = "../../../frp" }
ensogl-core = { path = "../../core" }
ensogl-hardcoded-theme = { path = "../../app/theme/hardcoded" }
ensogl-text = { path = "../text" }
Loading

0 comments on commit 4ae2cb1

Please sign in to comment.