Comments (2)
Thanks for the answer! Your solution perfectly fits my case, so I just modified it a bit and ended up with:
<script lang="ts">
let frequencyExponent = 6;
$: frequency = Math.pow(10, frequencyExponent);
</script>
<Slider bind:value={frequencyExponent} label="Frequency" min={0} max={7} format={(value) => Math.pow(10, value).toExponential(1)}/>
And I'm using frequency elsewhere in the app. It works very well, and it's small enough not to require a change in tweakpane or in this repo I believe.
from svelte-tweakpane-ui.
Hey thanks and good question!
There's some discussion of this in the Tweakpane repo here and here... the author suggests writing a Tweakpane plugin as the only way to accomplish this "properly".
I'd be happy to add a Tweakpane Plugin that accomplishes this to the Svelte TweakpaneUI library, but I don't think anyone's implemented it yet.
You can get kind of close in Svelte Tweakpane UI be combining a Svelte reactive value with the Slider
component's format
prop to keep the slider's label in sync with the log value, something like this:
<script lang="ts">
import { Slider } from 'svelte-tweakpane-ui';
function logScale(x: number) {
return Math.log10(1 + 99 * x) / Math.log10(100);
}
let linearValue = 1;
$: logValue = logScale(linearValue);
</script>
<Slider
bind:value={linearValue}
min={0}
max={1}
format={(v) => logScale(v).toFixed(2)}
/>
<pre>
{logValue}
</pre>
Example: https://stackblitz.com/edit/vitejs-vite-x6nku5?file=src%2FApp.svelte
But the problem here is that format
only affects the view of the display text input field, not the underlying value, so a number entered directly in the text field will be remapped from a linear to log scale, and appear to change, which feels weird.
The Wheel
and Ring
components have a wide
prop that lets you turn off the text input field, so there's nothing (visible) to keep in sync inside the Tweakpane control itself... but this might only really make sense if you want an exponential scale or something.
(This makes me think that a similar wide
option for the Slider
and IntervalSlider
components might be nice...)
So because of how the slider handle and text input field are coupled inside Tweakpane itself, there's not a great way to completely change the value scale that I can think of, sorry. Let me know if you end up finding an approach that works.
from svelte-tweakpane-ui.
Related Issues (7)
- Empty titles break dragging behavior HOT 1
- Large number of dependencies HOT 5
- AutoObject for List or RadioButtons HOT 3
- Pane collapse/expand behavior not correct HOT 6
- Plugin waveform integration shows large bundle size HOT 6
- Draggable Pane sticks to cursor when dragging operation is interrupted. HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-tweakpane-ui.