Comments (2)
I would suggest using a simple range with
step=1
and a format function to access your custom array.<template> <Slider v-model="value" min="0" max="7" step="1" :format="format" /> </template> <script> import Slider from '@vueform/slider' export default { components: { Slider }, data: () => ({ value: 0, format: (index) => ["500", "1k", "5k", "10k", "50k", "100k", "150k", "200k"][index] }) } </script>
Alright, thanks! Didn't know able to do in this way.
from slider.
I would suggest using a simple range with step=1
and a format function to access your custom array.
<template>
<Slider
v-model="value"
min="0"
max="7"
step="1"
:format="format"
/>
</template>
<script>
import Slider from '@vueform/slider'
export default {
components: { Slider },
data: () => ({
value: 0,
format: (index) => ["500", "1k", "5k", "10k", "50k", "100k", "150k", "200k"][index]
})
}
</script>
https://jsfiddle.net/mqwep05u/
from slider.
Related Issues (20)
- require('@vueform/slider/tailwind') breaks TailwindCSS disabled classes HOT 2
- Support noUISlider events HOT 1
- More than 2 decimals appear in the tooltip when setting :format="{ decimals: 2 }" and :step="0.01" HOT 1
- @change event comes before underlying model has been changed HOT 2
- typescript troubles HOT 9
- Update noUiSlider
- Stuck trying to import and use with Vite HOT 2
- @drag event doesn't work HOT 1
- Does this specific 'step' feature exist? - possible feature request HOT 2
- Usign :lazy="false" does not work propelry with VueDatePicker HOT 1
- Vue 3 with setup don't work to change v-model from outside?
- Change the color left side and right side of the slider HOT 1
- Allow each value to have a different tooltip formatter HOT 1
- Tool tip with drag mode doesn't work in single slider
- Not working with nuxt3 HOT 2
- Strange step behavior HOT 1
- Fit handle within bounds HOT 2
- Not able to import Slider from '@vueform/slider';
- Keeping tooltip within parent box HOT 1
- Not able to assign different aria-label to different handles HOT 1
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 slider.