vueform / slider Goto Github PK
View Code? Open in Web Editor NEWVue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).
Home Page: https://vueform.com
License: MIT License
Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).
Home Page: https://vueform.com
License: MIT License
Hey! Hi, I'm trying to use this beautiful slider but I'm no able to aply styling. I used the posted demo so I could see my styles working but nothing on my project.
Code:
<template>
<div>
<Slider v-model="value" :tooltips="false"/>
</div>
</template>
<script>
import Slider from '@vueform/slider'
export default {
components: {
Slider,
},
data() {
return {
value: 20
}
}
}
</script>
<style src="@vueform/slider/themes/default.css">
:root{
--slider-connect-bg: #a594fe;
--slider-bg: #252525;
--slider-height: 20px;
--slider-handle-width: 20px;
--slider-handle-height: 20px;
--slider-handle-bg: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(165,148,254,1) 60%);
--slider-tooltip-bg: #a594fe;
--slider-handle-ring-width: 3px;
--slider-handle-ring-color: #a594fe30;
}
</style>
Thanks and sorry for my English.
For example, I want a range of value like 500, 1k, 5k, 10k, 50k, 100k, 150k, 200k etc. When the user slide the value, it will goes to like 500, 1k, 5k and not the value in between them.
Is this feature available for this package?
When a sleek look is wanted, one might want only to show the tooltip when working with the slider.
This is btw default behavior in vue-slider-component.
This can be achieved with styling like this: (when wrapped in a div with class "slider")
.slider .slider-tooltip {
display: none;
}
.slider:hover .slider-tooltip,
.slider .slider-active .slider-tooltip {
display: block;
}
However. It would also be desirable to have the tooltip show when the component is focused, so the ones that prefers working with keyboard instead of mouse can see what they are changing the value to.
How can this be achieved?
It would be great if your component added a "slider-focused" class when in focus!
Or alternatively, you could perhaps add an option that triggers the behavior I'm trying to achieve?
Line 1 in 1e491ba
./Slider
.
Also, Vue 3 has a problem during build with all vueform components because the types extend from Vue. The current workaround ... shims file in project's src
folder:
declare module '@vueform/slider/dist/slider.js' {
import { DefineComponent } from 'vue'
const component: DefineComponent
export default component
}
and import component as
import Slider from '@vueform/slider/dist/slider.js`
The same applies to toggle and multiselect.
I encountered a series of build errors when I included <style src="@vueform/slider/themes/default.css"></style>
in a Nuxtjs project using PostCSS loader.
The exception was thrown by PostCSS loader, and coming from CSS rules like this one:
right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
I believe the issue is the -
character next to another character without any whitespace to distinguish a negative number from subtraction:
https://developer.mozilla.org/en-US/docs/Web/CSS/calc()#notes
I was able to fix the issue by changing the above line and those similar to it like so:
right:calc(var(--slider-tooltip-arrow-size, 5px) * -2)
to distinguish -2
from - 2
.
I imagine this problem is introduced during minification?
See the first slider here, when you try to click and drag it, it only moves by 1.00 before the drag handler stops.
https://jsfiddle.net/78dskaxo/
Hey, I am trying to send the slider handle back to a default position after the change event is triggered. After the change event is triggered the default position is computed and then set as the new position of the slider handle. This works fine when dragging the slider handle. However, when clicking on a random position on the slider bar or moving the slider handle with the arrows it doesn't seem to work anymore. I'm using v-model directive to pass the position of the slider. I verified the correct position to be sent whenever the event is triggered which is why I'm tempted to think it might be an internal issue. Has anybody come across this so far and is willing to share their input?
IMHO an option to lazy update the slider value would be very valuable when changes trigger computational expensive actions. By lazy I mean that v-model values change when user release the mouse click once in the desired final value.
I've been looking in docs, both this and noUiSlider, and couldn't find any reference to this option. Sorry if I missed.
Basically, it would be an enhancement to hide the tooltip by default, and show it only when the handle is dragged or clicked.
So how can i update to this new version? https://github.com/leongersen/noUiSlider/releases
"Added: support for ranges where min = max"
I really need it 🤗
My use case is where an option should result in a field being null.
Trying to set this in the UI breaks it, so you can't click it:
https://jsfiddle.net/p7v8q0e4/2/
Would you accept as PR to fix?
Hi, I am trying to build a slider component on https://message.dk/shop . We are setting the min and max value for the slider and the values seem to be updating correctly, at least when it comes to the numbers under the slider.
The issue is in the thumb in the slider. The position of it is completely off.
Looking into your demo I saw that transform: translate you are using is going to -1000% for the 0 position and mine goes up to 100%. As soon as I add one more 0 in dev tools, position is correct.
Also this only happens in production, development version uses the correct -1000% value.
Do you have any idea of why is there a difference in numbers?
Here are two screen shots of what happens before and after adding additional 0 to the calculation:
When I add the @vueform/slider/tailwind
plugin to tailwind.config.js
, the disabled
modifier stops working.
Reproduction link:
https://play.tailwindcss.com/alH2aZmsx5
Hello there, thanks for the awesome slider component! :)
I am trying to work with different transition durations when changing the slider value. It works as one would expect in Firefox, but there seems to be a problem in Chrome that I can't wrap my head around...
In short: only the default 0.3s transition duration works. It partially reacts to custom durations, and both in case of .slider-connect
and .slider-origin
the transition starts with the speed I define, but then 0.3 seconds later it just jumps to the destination value. So it starts out correctly, then "breaks" the transition, and jumps.
The problem is not apparent with the default 0.3s transition-duration, but I even tried to overwrite that 0.3s (for example to 3s) in the module itself (both in default.css and default.scss), and then the issue becomes apparent the same way with any default slider...
Am I missing something here? Or is this some kind of Chrome bug? Any suggestions are welcome. :)
I have range from 0 -> 0.0065433661231. The UI looks fine but when I fetch the value it shows either 0.00 or 0.01 (if slider is >= 0.005)
Is there a way to increase number of decimals?
I tried
format: { decimals: 6 }
but it only changes decimals in the UI, while the actual value is rounded
Hi. I've created a small demo, where I've tried to use this component as progress bar for an audio player:
https://github.com/xorik/slide-player
So I found 2 issues:
update:modelValue
events. You can see it in dev toolsAny suggestions how to fix it?
Error message
The `slider-txt-rtl` class does not exist. If `slider-txt-rtl` is a custom class, make sure it is defined within a `@layer` directive.
Dependencies:
"@vueform/slider": "^2.0.9",
"vue": "^3.2.25",
Dev dependencies
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"sass": "^1.51.0",
"tailwindcss": "^3.0.18",
"typescript": "^4.5.4",
"vite": "^2.9.0",
Error only exist when using tailwind.scss
import. It's not error when using classes
directly.
Hello
The slider appears to be preventing scrolling when touched on a mobile device. I understand that clicking to change value is part of the slider's normal behavior, but it doesn't seem to be a good user experience when the value is changed by mistake while scrolling.
Is there some known way to prevent that from happening?
I'm currently trying to disable the slider under different circumstances. But adding the prop :disabled to the slider component has no effect on the slider. It is not disabled and can be adapted as before.
My code:
// isPurchasePriceSliderDisabled is a computed property of my component (returns true or false)
<Slider
v-if="maxValues.purchasePrice"
v-model="state.sliders.purchasePriceSlider"
:tooltips="false"
:step="10000"
:min="0"
:max="maxValues.purchasePrice"
:disabled="isPurchasePriceSliderDisabled"
@change="sliderFilterChange($event, 'purchasePriceSlider');">
</Slider>
If i'm going to add the disabled property manually in my dev tools, everything works as expected.
Used version: 1.0.3
Kind regards
Magnus
Hi!
I couldn't exactly investigate when this problem is tiggered
in the error this is marked:
t.onblur=function(){V.value.focused.split(" ").forEach((function(t){A.value.classList.remove(t)}))},t.onfocus=function(){V.value.focused.split(" ").forEach((function(t){A.value.classList.add(t)}))}})),j.value=!0},q=function(){M.value.off(),M.value.destroy(),M.value=null},R=function(t,e){j.value=!1,q(),H()};return (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(H
Im using this for a time slider, i convert the time to seconds.
Any Idea please?
When I add a prefix I can't drag the track-thumb anymore. I can only click on the track to change the value.
Snippet:
<Slider v-model="name" :min="min_value" :max="max_value" :format="{'prefix' : '$', 'decimals' : 0, 'thousand' : ',' }"/>
if I remove the :format
binding then everything works fine.
Duplicate identifier 'options'.
options?: object;
Type 'typeof import("~/node_modules/vue/dist/vue")' is not a constructor function type.
declare class Slider extends Vue {
Workaround described in: Issue #18
Allow create slider without v-model for custom handler change
<Slider @change="set" :min="1" :max="99" />
Now without v-model got error
WARN @vueform/slider doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix. 11:55:29
<Slider
v-model="val"
:min="10"
:max="100"
:step="1"
/>
v2.0.5
All are integers divisibile by step. On few breakpoints (in my case 43, 47, etc), value overflows into float, f.e. 47.00000001
Not sure if this is a bug or if i am just misinterpreting how it works, but under roughly the same conditions as #7 the merging doesn't seem to work, here is it set to 30 and will merge only when its just 3 apart: https://jsfiddle.net/Lsm5rxyf/1/
is it possible add max value more than 100 in two range slider
The div wrapper for the slider has a slider
id. An HTML document cannot have more than one element with the same id, so this become unsemantic when including multiple sliders to a page.
Hello, I am trying to use the Vue2 version of this slider but I keep getting this error when I try to render it:
[Vue warn]: Property or method "sliderProps" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property.
See https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Does anyone know how can I solve it?
Hey, thank you for creating this component!
Is there a way to set different slider and tooltip color as the value changes? 1-10 is red, 11-20 is yellow, 20-30 is green and so on.
I have had a look at the documents and various other slider components but as a new Vue developer, this is seemingly hard. If possible could I get a guide on how to do this? I believe you will help me. Cheers!
Hi,
If I use the :options prop on the slider (seems to occur no matter what option or even if it's empty) the dragging is broken. I can drag one step, but then the functionallity stops and I can't drag anymore.
Happens to me even if I just add :options="{}" in your examples etc.
Why does this happen and can it be fixed? Thanks for a great component otherwise!
Hi,
I'm trying to use your slider within a nuxt.js project, but I always get this error:
'Cannot use import statement outside a module'
Composition API is installed and working, can you try the latest stable version of nuxt and see if your instructions still work?
Thank you for your help,
Alessio
When value is updated through v-model
(exogenous change) as opposed to user dragging the handle (endogenous change), there is no good reason to emit the update
and change
events since I can just watch on the value passed into v-model
. This makes it hard to differentiate between exogenous and endogenous change
Hi, I'm updating my Vue3 application to use TS. I get this error:
TS7016: Could not find a declaration file for module '@vueform/slider'. '[...]/node_modules/@vueform/slider/dist/slider.js' implicitly has an 'any' type. Try npm i --save-dev @types/vueform__slider if it exists or add a new declaration (.d.ts) file containing "declare module '@vueform/slider';"
npm i --save-dev @types/vueform__slider
didn't find anything.
What can I do about this ? Thanks !
I have 2 sliders linked by certain calculations. The 2nd slider's v-model downpayment.value
is being updated whenever the 1st slider is dragged selectPrice()
. This triggers the update for method selectDownpayment()
, which should not be the case. Is there anything that I can do to not trigger it?
If you drag the handle off the end of the slider then mouse up you get error:
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at slider.js:1:37515
Hey !
I have a slider going from 100 000 up to 250 000 with a step of 100. Associated to the slider is an input in which the user can adjust the price. The issue i'm facing is that if the user types 123 456 for example, the value will automatically be rounded to the nearest step which is 123 500.
There is an option in NoUiSlider which allows the value to be set exactly but is not currently usable with the SLider component. Would it be possible to have it as a boolean option ?
NoUiSlider related doc : https://refreshless.com/nouislider/slider-read-write/#section-setting)
Thanks in advance !
Trying to build a project on NUXT 2, but got an error.
I've tried importing both CSS and SCSS to my main SCSS file and to the nuxt config.
Nothing works.
Without explicit importing style - the slider looks incorrect (almost invisible)
ERROR in ./node_modules/@vueform/slider/themes/default.css (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@vueform/slider/themes/default.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 41
at /Users/gen4/Gits/BigDay/STD-visual/node_modules/@vueform/slider/themes/default.css:1:1536
at Parser.error (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:194:18
at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:139:18
at Rule.each (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:105:16)
at Rule.walk (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:135:17)
at /Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:152:24
at Root.each (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:105:16)
at Root.walk (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:135:17)
at Root.walkDecls (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss/lib/container.js:192:19)
at transformProperties (/Users/gen4/Gits/BigDay/STD-visual/node_modules/postcss-custom-properties/index.cjs.js:330:8)
@ ./node_modules/@vueform/slider/themes/default.css 4:14-145
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
I am trying to change the class in a vue way, so I can change the color based on certain input.
Example:
https://jsfiddle.net/afr80kpm/1/
I see this was requested in another issue #17 , although I feel that is a very hacky way around it.
It would be better if I could set a computed property to the props and have it update automatically without having to worry about dom and such.
My usecase is having a min
of 1 and a max
of 12 to select an inclusive month range which grabs the english name of the month from an array by key, but for some values it returns really long floats, like for this example: €5.000000000000001
https://jsfiddle.net/gjhdu6pL/
(of course i can and i will round it down on my end to fix my usecase, but i figured i let ya'll know about this one)
Using percentage from 1-100 for the float values
Hello, thank you for your work, it works well !
Is-it possible to change the tooltip in input to permit to change the value by keyboard and by the slider ?
Thank you !
Hi,
Thank you for making this library.
Is there any option for stylings, like background or line thickness?
if my value < 50 then background color turns to red, if my value > 50 then background color turns to green.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.