vueform / slider Goto Github PK

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.

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?

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

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 there.
I got some issue here:

Any thoughts?

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. :)

is it possible add max value more than 100 in two range slider

could you add such "step labels"?

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:

Using percentage from 1-100 for the float values

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

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?

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 !

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 !

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.

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?

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.

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 !

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

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?

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/

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.

Allow create slider without v-model for custom handler change

<Slider @change="set" :min="1" :max="99" />

Now without v-model got error

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.

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.

It would be great to have an easy option to change the direction of the tooltip.
For example:

• tooltip-direction="top" (default)
  
• tooltip-direction="bottom"
  

Happy to do a PR, if you agree. Thanks for this awesome component!

  <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

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

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:

1. When value is changed externally, the component anyways sends update:modelValue events. You can see it in dev tools

2. I've tried to workaround it, by ignoring this event (with computed), it helped a bit, and it works perfectly in firefox, but in chrome the slider is shaking which is visually not nice.

Any suggestions how to fix it?

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.

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)

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

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,

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!

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 🤗

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?

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

1. how i can calculate label beetween marks value ?
   

2. How i can use range color only beetween marks ?
   
   or if 3 marks or more
   

3. how i can dont merge labels for range ?
   

Final Result what i need :

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

Do you have something like this - label "Min gård" ?

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.

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?

https://codesandbox.io/s/focused-andras-u9xv20

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?

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?

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!

Basically, it would be an enhancement to hide the tooltip by default, and show it only when the handle is dragged or clicked.

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?

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/