Comments (3)
Oh, nice catch, @Ezbaze! I think I understand:
When calling r.props('min=10 max=90')
, we're setting r._props['min'] = '10'
and r._props['max'] = '90'
. Both limits are treated as strings, because .props()
can't recognize data types. Quasar's QRange, however, doesn't seem to be able to handle strings as range limits, which causes the strange behavior.
When we update the limits by writing floats to r._props
, the range element behaves nicely:
r = ui.range(min=0, max=100, value={'min': 30, 'max': 70})
def change_limits():
r._props.update(min=10, max=90)
r.update()
ui.button('Change limits', on_click=change_limits)
ui.label().bind_text_from(r, 'value', str)
So we don't even need PR #3242. But we should provide a public API for changing min
and max
to avoid this data type confusion.
from nicegui.
Here is a minimum example:
r = ui.range(min=0, max=100, value={'min': 30, 'max': 70})
ui.button('Change limits', on_click=lambda: r.props('min=10 max=90'))
ui.label().bind_text_from(r, 'value', str)
After changing the limits, adjusting the range causes it to disappear and the value is None
.
A plain Quasar example works fine though:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="q-app">
<q-range v-model="range" :min="rangeLimits.min" :max="rangeLimits.max"></q-range>
<q-btn label="Change limits" @click="changeLimits"></q-btn>
<div>Current range: {{ range.min }} - {{ range.max }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return { range: { min: 30, max: 70 }, rangeLimits: { min: 0, max: 100 } };
},
methods: {
changeLimits() {
this.rangeLimits = { min: 10, max: 90 };
},
},
setup() {
return {};
},
});
app.use(Quasar);
app.mount("#q-app");
</script>
</body>
</html>
Does anyone have an idea?
from nicegui.
This seems to be caused by the missing :
in front of the prop names, adding those in seems to fix the issue, but I'm unsure why.
Modified minimum example:
from nicegui import ui
r = ui.range(min=0, max=100, value={"min": 30, "max": 70})
ui.button("Change limits", on_click=lambda: r.props(":min=10 :max=90"))
ui.label().bind_text_from(r, "value", str)
ui.run()
I also submitted a draft pull request with the changes: #3242
from nicegui.
Related Issues (20)
- RuntimeError: app.storage.user needs a storage_secret passed in ui.run() HOT 8
- on air not working from UK HOT 2
- Make `client.ip` available before socket connection is established
- Input unable to add forward slash (/) when it is bind to path HOT 2
- on_upload doesn't seem to be working HOT 10
- Connection lost within 3 seconds when app is deployed on kubernetes HOT 1
- TypeError: Client.__init__() missing 1 required keyword-only argument: 'request' HOT 5
- Pytest for pages with a URL other than root ("/") fail. HOT 2
- Tooltip HOT 4
- ui.clipboard.read does not work in Safari and native mode on Mac HOT 1
- ui.number displayed number format not maintained HOT 1
- Tooltip not working with ui.upload component HOT 2
- ui.codemirror not updating when the binded dictionary changes HOT 3
- 3D objects get stuck in scene when reloading. HOT 1
- Updating Ploty chart with a large dataset causes the UI to hang HOT 6
- ui.select() dropdown width unexpected behaviour
- Reloading is very slow HOT 10
- `True (error) or False (no error)` in `Input validation` should be `True (no error) or False (error)` HOT 1
- How to cut startup time in half while native=True. HOT 2
- [WinError 10013] at start (Problem binding to port 80?) HOT 5
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 nicegui.