Adding Curreny Format to NoUISlider - javascript

I am using nouislider (http://refreshless.com/nouislider/), but what I am trying to do is have the value outputted from the slider come out looking like this:
£3,500
Rather than:
3500
So far my code is as follows:
<script>
var slider = $('#sample-update-slider');
slider.noUiSlider({
range: [250, 75000],
start: 11500,
handles: 1,
margin: 2,
step: 250,
serialization: {
to: [$('#value'), 'text'],
resolution: 1
}
});
</script>
For any of you that are familiar with nouislider, the value is outputted to a span with an ID of value.
Hope someone can help!
Thanks
Dave
Thank you for anyone who looked at this question, I have answer part of it with the help of the developer of nouislider, but he seems to be a busy guy so he hasn't given me the full answer.
so far i have been able to add the currency to the number with the following script:
var slider = $('#totaldebt');
slider.noUiSlider({
range: [250, 75000]
,start: 14500
,handles: 1
,margin: 2
,step: 250
,serialization: {
to: function( value ) {
var value = "£" + value;
$('#totaldebt-value').text( value );
} ,resolution: 1
}
});
The code that adds the currency to the output is:
to: function( value ) {
var value = "£" + value;
$('#totaldebt-value').text( value );
}
My other problem is separating the numbers that are greater than 1000 with commas, so 1000 becomes 1,000.
Thanks all

I used this function in my script:
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Then my nouislider code:
$slider.noUiSlider({
range: [80000,1000000],
start: [250000],
step: [sliderStep],
connect: "lower",
handles: 1,
serialization: {
to: function(value){
value = "£" + numberWithCommas(value);
$("#value").val(value);
}
}
});

Related

how to have a title in range slider and update the value shown

i have defined like this:
$(".js-range-slider").ionRangeSlider({
type: "single",
min: 1,
max: 40,
grid: true,
onChange: function (data) {
console.log("--------------------- " + data.from);
}
});
using ion.rangeslider i need to show in the value selected area the value multiplied by another value. by example, i need to multiply * 5 the value selected.
i need to update this when the selected value changes
http://prntscr.com/qav6rd
in the example, i need to show "6 persons by 5€: 30€"

Multiple sliders with two number inputs

I'm trying to make noUiSlider work with one class on multiple locations in the same page. Right now i have 2 sliders, both are working fine, except for a strange behavior when i change the value of the second input, it actually updates the first handle and input. I'll be gratefull if someone helps me.
JSFiddle
function bindValues(price_slider, inputNumberMin, inputNumberMax){
price_slider.noUiSlider.on('update', function( values, handle ) {
var value = values[handle];
if ( handle ) {
inputNumberMax.value = Math.round(value);
} else {
inputNumberMin.value = Math.round(value);
}
});
inputNumberMin.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value);
});
inputNumberMax.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value);
});
}
var price_sliders = $('.price-filter');
var inputsNumberMin = $('.price-filter-min-price');
var inputsNumberMax = $('.price-filter-max-price');
for ( var i = 0; i < price_sliders.length; i++ ) {
noUiSlider.create(price_sliders[i], {
start: [0, 100],
connect: true,
range: {
'min': 0,
'max': 100
}
});
bindValues(price_sliders[i], inputsNumberMin[i], inputsNumberMax[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" rel="stylesheet"/>
<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">
<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">
Your problem is in this:
inputNumberMin.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value);
});
inputNumberMax.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value); // <<< here
});
The set method takes an array of values for the whole slider. If a single value is passed, that is set on the first handle. Instead, you'll have to be explicit about which value you want to update:
price_slider.noUiSlider.set([null, this.value]); // 'null' values are ignored.
Updated fiddle:
http://jsfiddle.net/leongersen/z83oz9np/268/

How to show Total number of pages in YUI Paginator?

I am using YUI Paginator API for pagination and I need to show Total number of pages on screen. I saw that there is a function getTotalPages() in API but I am unsure about how to use it, there isn't enough documentation. Also after looking at some other documentation I tried using {totalPages} but didn't work.
Can somebody help me out in this issue? Thanks in advance!!
Below is the code snippet I am using. Please refer to template object from config:
config = {
rowsPerPage: 100,
template :
'<p class="klass">' +
'<label>Total pages: {totalPages}</label>'+
'<label>Page size: {RowsPerPageDropdown}</label>'+
'</p>',
rowsPerPageDropdownClass : "yui-pg-rpp-options",
rowsPerPageOptions : [
{ value : 100 , text : "100" },
{ value : 250 , text : "250" },
{ value : 500 , text : "500" },
{ value : 1000 , text : "1000" },
{ value : tstMap[tabName].length , text : "All" }
],
};
var myPaginator = new YAHOO.widget.Paginator(config);
The Paginator utility allows you to display an item or a group of items depending on the number of items you wish to display at one time.
Paginator's primary functionality is contained in paginator-core and is mixed into paginator to allow paginator to have extra functionality added to it while leaving the core functionality untouched. This allows paginator-core to remain available for use later on or used in isolation if it is the only piece you need.
Due to the vast number of interfaces a paginator could possibly consist of, Paginator does not contain any ready to use UIs. However, Paginator is ready to be used in any Based-based, module such as a Widget, by extending your desired class and mixing in Paginator. This is displayed in the following example:
YUI().use('paginator-url', 'widget', function (Y){
var MyPaginator = Y.Base.create('my-paginator', Y.Widget, [Y.Paginator], {
renderUI: function () {
var numbers = '',
i, numberOfPages = this.get('totalPages');
for (i = 1; i <= numberOfPages; i++) {
// use paginator-url's formatUrl method
numbers += '' + i + '';
}
this.get('boundingBox').append(numbers);
},
bindUI: function () {
this.get('boundingBox').delegate('click', function (e) {
// let's not go to the page, just update internally
e.preventDefault();
this.set('page', parseInt(e.currentTarget.getContent(), 10));
}, 'a', this);
this.after('pageChange', function (e) {
// mark the link selected when it's the page being displayed
var bb = this.get('boundingBox'),
activeClass = 'selected';
bb.all('a').removeClass(activeClass).item(e.newVal).addClass(activeClass);
});
}
});
var myPg = new MyPaginator({
totalItems: 100,
pageUrl: '?pg={page}'
});
myPg.render();
});

Show increasing and decreasing values on noUiSlider

I'm using a noUiSlider with one handle and a range from 0 to 50. I'm trying to show the increasing value of the slider on an input field to the left of the slider and the diminishing value on the right - as in the below example:
Slider
Has anyone else tried to do this or know how it can be achieved?
var connectSlider = document.getElementById('slider');
noUiSlider.create(connectSlider, {
start: 20,
tooltips: true,
decimals: 0,
connect: [true, false],
range: {
'min': 0,
'max': 50,
},
format: wNumb ({decimals:0})
});
var inputFormat = document.getElementById('slider-value');
sliderFormat.noUiSlider.on('update', function( values, handle ) {
inputFormat.value = values[handle];
});
inputFormat.addEventListener('change', function(){
sliderFormat.noUiSlider.set(this.value);
});
$("#slider").Link('lower').to('#slider-value',function(value){
$(this).val(Math.abs(value));
});
Here it is in jsfiddle
I managed to get the left value to display on the screen but don't know how to bind it to the input field. And I don't know how to get the value on the right. I assume this should be 'max value' minus 'slider value' but don't have enough knowledge of JavaScript so I would really appreciate some help with this :)
I'm working with Slider control from the 0.99.0 Materialize version and I wanted to get that behavior too. So I do some tricks as follow:
My HTML inside a form tag:
<div class="input-field col s12">
<label for="wmAttendance">Porcentaje de Asistencias</label><br>
<p class="range-field">
<input type="range" id="test5" min="0" max="100" oninput="wAttendance.value = test5.value" />
<output id="wAttendance" name="wAttendance">0<span>% - Mujeres</span></output>
<output id="mAttendance" name="mAttendance" class="right">0<span>% - Hombres</span></output>
</p>
</div>
JS needed to intercept changes on the range input
$(document).ready(function() {
$("#test5").on("input", function() {
var women = this.value, men = 100 - women;
$("#a_women").html(women);
$("#a_men").html(men);
$("#wAttendance").html(women + "<span>% - Mujeres</span>");
$("#mAttendance").html(men + "<span>% - Hombres</span>");
});
});
And voila we have make the magic happen and the result is something like this:
In this way we can catch both values to send in the form or to make some operations etc. Here you have my pen for reference.
I hope it could be useful for somebody else.
Ive had a play with you code and got this working:
var connectSlider = document.getElementById('slider');
// add max amount variable (used to calculate #slider-value-after input value)
var maxAmount = 50
noUiSlider.create(connectSlider, {
start: 20,
tooltips: true,
decimals: 0,
connect: [true, false],
range: {
'min': 0,
'max': maxAmount, // use max amount variable to set max range amount
},
format: wNumb ({decimals:0})
});
var inputFormat = document.getElementById('slider-value');
// created variable for #slider-value-after input
var inputFormat2 = document.getElementById('slider-value-after');
// for some reason you were looking for a 'sliderFormat' variable to watch for slider updates
// this wasnt created and was causing JS errors in the fiddle
// Ive updated this to the 'connectSlider' variable you created.
connectSlider.noUiSlider.on('update', function( values, handle ) {
// on update set first input value
inputFormat.value = values[handle];
// also set #slider-value-after input value by minus'ing the max value by current slider value
inputFormat2.value = maxAmount - values[handle];
});
inputFormat.addEventListener('change', function(){
connectSlider.noUiSlider.set(this.value);
});
I think it is also possible to get slider options which would remove the need to set the maxAmount variable as you could query the sliders max range amount instead but I cant remember the code for this.

mobiScroll - Reset value of wheels when clicking extra button

I'm trying to add a thrid functionality to the mobiscroll scroller. First of all some explanations: I have 4 custom created wheels from "0" to "9". The user can insert a 4-digit number here.
Additionally to the standard "cancel" ("Abbrechen") and the "add" ("OK") button i want to implement an reset ("Bestand") button, which sets all wheels within the scroller to the value "0". Adding this additionally button haven't been any problem, but adding the wanted functionality to it unfortunately is. The wanted function just should reset the value of all 4 wheels to the value "0". Following my code so far:
init the wheels....
var whl1 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl2 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl3 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl4 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var wheel = [{},{},{},{}];
wheel[0]['1000er'] = whl1;
wheel[1]['100er'] = whl2;
wheel[2]['10er'] = whl3;
wheel[3]['1er'] = whl4;
init the scroller.... (within a loop).......
$('#' + i +'').scroller({
display: 'modal',
mode: 'clickpick',
lang : 'de',
headerText: function(value) {
//Some Stuff in here
},
button3Text: "Bestand",
button3: function(){
// this function doesn't work................
$('#' + i +'').mobiscroll('setValue', ['0', '0', '0', '0']);
},
formatResult: function(data) {
// some other stuff in here
},
onSelect: function(valueText, inst) {
// some other stuff, too
},
wheels: wheel,
height: 40
});
I have tried many ways to realize the functionallity, but nothing worked.... does anyone have an idea, how I can fix this issue? Because I already lost a lot of time fixing this issue (2 full days...), I would be very grateful for every resonse or little hint...... Thanks in advance and have a nice week!
I think that inside the button3 function the value of i is always the same, it is not remembered what value it had inside the loop.
You can try to loop through the elements with jquery like this:
HTML:
<input id="t1" class="mobiscroll" />
<input id="t2" class="mobiscroll" />
<!-- .... -->
Javascript:
$('.mobiscroll').each(function() {
var that = $(this);
that.mobiscroll({
display: 'modal',
mode: 'clickpick',
lang : 'de',
headerText: function(value) {
//Some Stuff in here
},
button3Text: "Bestand",
button3: function(){
// this function doesn't work................
that.mobiscroll('setValue', ['0', '0', '0', '0']);
},
onSelect: function(valueText, inst) {
// some other stuff, too
},
wheels: wheel,
height: 40
});
});

Categories