Stack Overflow
Stack Overflow

Questions tagged [nouislider]

noUiSlider is an open source (MIT) JavaScript range slider with full touch support (iOS, Android, Windows).

noUiSlider is a open source (MIT) JavaScript range slider with full touch support (iOS, Android, Windows).

https://refreshless.com/nouislider/

Basic syntax

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
  start: [20, 80],
  connect: true,
  range: {
    'min': 0,
    'max': 100
  }
});
308 questions
16
votes
3 answers

NoUIslider - Update range on demand

I have two sliders and I would like to update the range of one slider based on the movement of the other. For instance; slider_1 and slider_2 both have a range of 1-10. When I move slider_1 from position 1 to 2, slider_2's range changes from 1-10 to…
DGDD
  • 1,370
  • 7
  • 19
  • 36
11
votes
9 answers

NoUISlider Tooltip only show integers

I want that the tooltip on my slider only shows integers like "130" and not "130.00". I just dont know where i could start. Here is my code: $( document ).ready(function() { var groesseslider =…
Juloius
  • 253
  • 1
  • 4
  • 11
11
votes
3 answers

noUiSlider: Create multiple

I'm using noUiSlider (http://refreshless.com/nouislider/) on a form which will have dozens of sliders on it. Rather than copy/pasting the code for each, I thought I could just set up an array of class names and a loop. That works; ie, it sets up…
emmzee
  • 630
  • 5
  • 14
9
votes
4 answers

HTML5 slider bar. How to use the 'noUiSlider'

Good afternoon, I am trying to implement the 'noUIslider' slider bar (http://refreshless.com/nouislider/) and am struggling even with the first example on their homepage. I have downloaded the various css and js and unzipped them in a folder. Then I…
Laurent
  • 711
  • 2
  • 12
  • 30
9
votes
1 answer

Prevent NoUISlider tooltips from overlapping

The NoUISlider is a great working plugin, however I would like the tooltips to not overlap each other. I have the following which works, except for the overlapping tooltips. $("#slider").noUiSlider({ range: { min: 0, max: 100 }, step: 5, connect:…
thans
  • 123
  • 1
  • 5
7
votes
2 answers

noUiSlider long number rounding error

I initialize noUiSlider with data var settings = { connect: "lower", range: { max: 87654567890, min: 0 }, start: 30679098762, step: 1 } after initialization slider value is 30679098761.50 why? Demo here -…
sglazkov
  • 1,046
  • 1
  • 10
  • 38
6
votes
1 answer

How to format the tick labels of the noUiSlider with SI symbols?

Here is how my noUiSlider looks like: I would like to format the tick labels as: 1000 -> 1K, 900000 -> 900K, 5000000 -> 5M, etc; i.e. abbreviating the number with the appropriate SI symbol. library(shiny) library(shinyWidgets) ui <- fluidPage( …
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
6
votes
1 answer

How to get react noUiSlider min max values on update?

I am trying to use noUiSlider to filter my results. I used noUiSlider component to show slider. Slider is showing but i am not able to get min max values on slide. I want to show integer min max values in text box and use them for filter. this is…
Vinay
  • 2,272
  • 4
  • 19
  • 34
5
votes
1 answer

NoUiSlider not visible

I am truing to use noUiSlider in my react application. I have done the initialization in my componentDidMount method but noUiSlider is not visibble. I am not getting any error in console. The element list also shows that nouislider is present on…
EdG
  • 2,243
  • 6
  • 48
  • 103
5
votes
1 answer

Replace hidden field value with value of NoUiSlider value to pass to form PHP

I have used the NoUiSlider JS plugin on my website which allows the user to use a slider to select a budget, which is great but I want the value they choose to be included as part of a contact/quote form. I have added a hidden field to the form…
user3711642
  • 99
  • 1
  • 12
5
votes
1 answer

can't get noUISlider to work

I can't get noUISlider to work Here my code snippet: