EzDevInfo.com

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: true,
start: [ 20, 50 ]
});

$("#slider").Link('lower').to('-inline-<div class="tooltip"></div>', function(value){
$(this).text(  "From: "+value );
});


$("#slider").Link('upper').to('-inline-<div class="tooltip"></div>', function(value){
$(this).text(  "From: "+value );
});

http://jsfiddle.net/q5651786/2/

I am thinking something like this would be nice: http://ionden.com/a/plugins/ion.rangeSlider/demo.html

Anyone got a clue?

noUISlider: Linking Slider to an Input

I'm using the noUiSlider to link a slider and an input as shown in the example on this page: http://refreshless.com/nouislider/linking-input-fields/

$("#slider").Link('lower').to($('#input'));

That works fine. However, if the value is negative (-1), is there a way I can convert to the absolute value (1) before passing to the input? I thought something like this:

$("#slider").Link('lower').to('#input',function(value){
    $(this).val(Math.abs(value));
});

That doesn't work. Any help would be appreciated. Thanks!

Evaluate attribute value as number and not string within directive

I am pretty new to AngularJS and I am not sure this can be really accomplished. I'm using this angular directive within a custom directive template and I want to set some of its attributes from isolated scope properties. The thing is that it seems some of them only accept numeric values and Angular evaluates them as string.

For instance, this works as expected:

<div slider ng-model="myModel" start=0 end=10 step=1></div>

I want to be able to set start/end/step attributes from an isolated scope property like follows:

<div slider ng-model="myModel" start={{attributes.range[0]}} end={{attributes.range[1]}} step={{attributes.step}}></div>

This is interpreted as follows:

<div ng-model="myModel" start="0" end="10" step="1" class="ng-isolate-scope ng-pristine ng-valid"></div>

And I get the following exception:

RangeError: noUiSlider: 'range' value isn't numeric.

Is there out a way to evaluate directive attributes to number instead of string?

nouislider: adding pips non-numerical last value?

Is there a way to show a non-numerical last pips value. for instance, showing pips scale for 0, 100, 200, 300, More

Thanx for this great script!

noUiSlider linking error

I get the following error when trying to use the libLink feature with NoUISlider:

Uncaught TypeError: undefined is not a function (jquery.liblink.js:260

The line of code:

// If the Link requires creation of a new element,
    // Pass the element and request confirmation to get the changehandler.
    // Set the method to be called when a Link changes.
    linkInstance.changeHandlerMethod = this.LinkConfirm( flag, linkInstance.el );

In my HTML I have the following code:

<div id="slider" ></div>

My Javascript:

$("#slider").noUiSlider({
    start: 20,
    range: {
        'min': 10,
        'max': 50
    }
});

$("#slider").Link('lower').to('-inline-');

I have both the NoUISlider and liblink libraries included in the page.

I don't get to see the value label. How can I solve this? Thanks!

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 1-20. If I move slider_1 from position 2 to 3, slider_3 now has a range from 1-30, and so on.

I initialize the slider like so:

  function slider() {
        $(".slider").noUiSlider({
            orientation: "horizontal",
            start: [0],
            range: {
                min: 0,
                max: 10,
            },
            connect: 'lower',
            direction: "ltr",
            step: 1,
        });
    };

The best way I can come up with implementing this so far is deconstruct the whole slider, and re-initialize it with the new range each time. However I am unsure of how to properly deconstruct the slider.

Any ideas on how this should be done?

Use noUiSlider with this form

I'm in over my head with this stuff - I'm looking to make noUiSlider (http://refreshless.com/nouislider/) work with the following form. I want to have a slider for the Minimum and Maximum price values in the form, where the slider moves up in increments of $10,000. Is this possible?

<script type="text/javascript" src="http://idx.myrealpage.com/js/weblets/omnibox_wp.js"></script>
<div class="unibox-search unibox-search-regular">

<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms"> 
<option value="">--- Bedrooms ---</option> 
<option value="1">Min. 1 bedroom</option> 
<option value="2">Min. 2 bedrooms</option> 
<option value="3">Min. 3 bedrooms</option> 
<option value="4">Min. 4 bedrooms</option> 
<option value="5">Min. 5 bedrooms</option> 
</select> 
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms"> 
<option value="">--- Bathrooms ---</option> 
<option value="2.0">Min. 2 bathrooms</option> 
<option value="3.0">Min. 3 bathrooms</option> 
<option value="4.0">Min. 4 bathrooms</option> 
<option value="5.0">Min. 5 bathrooms</option> 
</select> 
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price"	onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
			<input type="text" class="unibox-price-max" placeholder="Max Price"	onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
	</div>
<div class="unibox-quick-summary-line"> 
<span class="unibox-quick-summary"></span><span>&nbsp;</span> 
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="http://firsthomeplan.ca/propertylistings" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>

noUiSlider custom formatting time with libLink

Custom formatting plus libLink of a time value in noUiSlider does not work for me as expected.

I want to use the slider to output a time in 24 hours format (like 17:32).

I also want to enter a valid time and have the slider updated via libLink.

When I move the slider, the time in the input is correctly updated. But it does not work the other way around: entering a new time in the input and then unfocusing resets the input to the previous value.

If you uncomment the console.log in function HHMMtoMinutes() you can see it firing twice. What is happening here?

$(document).ready(function() {

  $(".slider").noUiSlider({
    start: ["07:30"],
    range: {
      'min': 0,
      'max': 24 * 60
    },
    format: {
      to: minutesToHHMM,
      from: HHMMtoMinutes
    }
  });

  $(".slider").Link("lower").to($("#time"));

});

function minutesToHHMM(value) {
  value = Math.round(value);
  var hour = Math.floor(value / 60);
  var min = value - hour * 60;
  //console.log("value:" + value + "\thour: " + hour + "\tmin: " + min)
  return ("0" + hour).slice(-2) + ":" + ("0" + min).slice(-2);
}

function HHMMtoMinutes(value) {
  var split = value.toString().split(":");
  var hour = parseInt(split[0]) * 60;
  var min = parseInt(split[1]);
  //console.log("value: " + value + "\thour: " + hour + "\tmin " + min);
  return hour + min;
}

<link rel='nofollow' href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>

<div style="width:80%; margin:80px 0 0 100px">
  <div class="slider"></div>
  <form style="margin-top:20px">
    <label for="time">time</label>
    <input type="text" id="time" name="time" />
  </form>
</div>

Here is also a JSFiddle: https://jsfiddle.net/g42e6saf/2/

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 = document.getElementById('slider-tooltip');

noUiSlider.create(groesseslider, {
    start: [ 145 ],
    step: 1,
    range: {
        'min': 100,
        'max': 250
    }
});
    });
$( document ).ready(function() {
    var groesseslider = document.getElementById('slider-tooltip');
var tipHandles = groesseslider.getElementsByClassName('noUi-handle'),
    tooltips = [];

// Add divs to the slider handles.
for ( var i = 0; i < tipHandles.length; i++ ){
    tooltips[i] = document.createElement('div');
    tipHandles[i].appendChild(tooltips[i]);
}

// When the slider changes, write the value to the tooltips.
groesseslider.noUiSlider.on('update', function( values, handle ){
    tooltips[handle].innerHTML = values[handle];
});
    });

My JS Code: http://jsfiddle.net/miiauwz/66a5ahm0/

can't get noUISlider to work

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

<script>
var handlesSlider = document.getElementById('slidertest');

noUiSlider.create(handlesSlider, {
	start: [ 4000, 8000 ],
	range: {
		'min': [  2000 ],
		'max': [ 10000 ]
	}
});
</script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>    
<link rel="stylesheet/less" type="text/css" rel='nofollow' href="css/style.less"/>
<link rel='nofollow' href="css/nouislider.min.css" rel="stylesheet">
<script src="scripts/less.js"> </script>
<script src="scripts/jquery-2.1.4.min.js"> </script>
<script src="scripts/jquery-ui.min.js"> </script>
<script src="scripts/dropzone.js"> </script>
<script src="scripts/nouislider.min.js"> </script>
</head>



...

<div id="slidertest"></div>

And I'm getting this error: Uncaught TypeError: Cannot read property 'nodeName' of null

Execute function after the user finishes using the slider

I want to execute some function after the user has finished using the slider and not while the slider is being manipulated.

Only after the handle stops, then start the function. I remember doing this using setTimeout and clearTimer but I don't remember how to do it exactly.

$('#slider').on('slide', function(){ 
   some_function();
});

Note that I am using nouislider and not jquery.

adding tick marks to nouislider jquery slider

I'm using noUIslider (http://refreshless.com/nouislider/) in one of my projects. I want to know how I can place tick marks below each value on the slider. This is how the slider is initialized:

$slider.noUiSlider({
    'start': start,
    'connect': 'lower',
    'orientation': 'horizontal',
    'range': {
        'min': min,
        'max': max
    },                    
    'step': 1,
    'serialization': {
        'format': {
            'decimals': 0
        }
    }
});

If anyone of you knows how to add tick marks to this slider it will be greatly appreciated.

Calculating total amount from nouisliders

I want the amount of two noUiSliders to autoupdate as I slide and be displayed at the Sum.

The value from the first slider to be multiplied with the value from the second slider, then multiply that again by 110. The result will then display in the span sum.

    <h2>Antall selgere <span id="selgere"></span></h2>
    <div class="slide_selgere"></div>

    <h2>Antall pakker <span id="pakker"></span></h2>
    <div class="slide_pakker"></div>

    Sum: <span id="sum"></span>

My script is as follows:

$(".slide_selgere").noUiSlider({
    start: [ 5 ],
    step: 1,
    format: wNumb({
        decimals: 0
    }),
    range: {
        'min': [ 1 ],
        'max': [ 10 ]
    }
});

$(".slide_selgere").Link('lower').to($('#selgere'));

$(".slide_pakker").noUiSlider({
    start: [ 15 ],
    step: 1,
    format: wNumb({
        decimals: 0
    }),
    range: {
        'min': [ 1 ],
        'max': [ 100 ]
    }

});

$(".slide_pakker").Link('lower').to($('#pakker'));

Bind NoUiSlider with a span

I use NoUiSliders and I want to bind it with a span object. On documentation they have this way:

$('#slider1').Link('lower').to($('#slider1value'));

However, what I want to do is to not show the value, but use it on a dictionary with the slider's values as keys and take the text from there. For example:

var names = ["0":"zero", "1":"one",...]

I don't know if it is something that you can do with wNumb from noUiSliders and I tried it by myself with this way:

$( "#slider1" )
  .on("slide set change", function() {
    var value = $( this ).val();
    $( "#slider1value" ).text( names[value] );
  })

It works as it is now when slider changes, but when the page loads with the predefined values, the span doesn't take the value from slider.

Is there any way to add another event like initialize or load? Or is there any other way to do it?

NoUISlider Not Working

So I spent the last couple hours trying to get NoUISlider to work on a basic page but I can't seem to get it to work. I looked all over to find example code but can't seem to find one that works. Here's what I have:

<link rel='nofollow' href="./css/jquery.nouislider.min.css" rel="stylesheet">
<!--<script src="./js/jquery-2.1.4.min.js"></script>-->
<script src="./js/jquery.nouislider.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<div class="roundCornerBoxTop">
<div id="slider-link"></div>
    <span class="example-val" id="span"></span>
            <input id="input">
<script>
$("#slider-link").noUiSlider({
    start: [ 20 ],
    step: 10,
    range: {
        'min': [ 20 ],
        'max': [ 80 ]
    }
});

$("#slider-link").Link('lower').to($('#span'));
$("#slider-link").Link('lower').to($('#input'));
</script>
</div>

I thought this is enough to get the slider working?

Here's another page I'm testing:

<head>
    <link rel='nofollow' href="./css/jquery.nouislider.min.css" rel="stylesheet">
    <script src="./video-js/video.js"></script>
    <!--<script src="./js/jquery-2.1.4.min.js"></script>-->
    <script src="./js/jquery.nouislider.all.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <script>
      $("#rangeSlider").noUiSlider({
    start: [ 950, 5060 ],
    range: {
        'min': 50,
        'max': 5960
    },
    connect: true,
    // Set some default formatting options.
    // These options will be applied to any Link
    // that doesn't overwrite these values.
    format: wNumb({
        decimals: 1
    })
});

// Place the value in the #value element,
// using the text method.
$("#rangeSlider").Link('lower').to($("#value"), "text");

// Any selector is acceptable, so we'll
// select both inputs.
$("#rangeSlider").Link('lower').to($(".inputs"), null, wNumb({
    // Prefix the value with an Euro symbol
    prefix: '\u20AC',
    // Write the value without decimals
    decimals: 0,
    postfix: ',-'
}));

function setText( value, handleElement, slider ){
    $("#someElement").text( value );
}

// Link accepts functions too.
// The arguments are the slider value,
// the .noUi-handle element and the slider instance.
$("#rangeSlider").Link('upper').to(setText);

// When you pass a string to a link,
// it will create a hidden input.
// You'll see the value appear when you
// alert the form contents.
$("#rangeSlider").Link('upper').to("inputName");

$('button').click(function(){
    // Use jQuery to make get the values from the form.
    // We'll decode the generated URL to keep it readable.
    alert(decodeURIComponent( $("#moneyForm").serialize() ));

    // Don't submit the form.
    return false;
});
    </script>

</head>
<body>
<form id="moneyForm">
  <div id="rangeSlider"></div>
  <div id="value"></div>
  <input name="one" class="inputs">
<input name="two" class="inputs">
<div id="someElement"></div>
</form>
</body>

JSFiddle: http://jsfiddle.net/wogw6y3f/ http://jsfiddle.net/94zuj1hg/