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.
Related
So I have settings for my wickedpicker. This is the setting
var options = {
now: "12:35", //hh:mm 24 hour format only, defaults to current time
twentyFour: true, //Display 24 hour format, defaults to false
upArrow: 'wickedpicker__controls__control-up', //The up arrow class selector to use, for custom CSS
downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
close: 'wickedpicker__close', //The close class selector to use, for custom CSS
hoverState: 'hover-state', //The hover state class to use, for custom CSS
title: 'Setting Jam', //The Wickedpicker's title,
showSeconds: false, //Whether or not to show seconds,
secondsInterval: 1, //Change interval for seconds, defaults to 1 ,
minutesInterval: 1, //Change interval for minutes, defaults to 1
beforeShow: null, //A function to be called before the Wickedpicker is shown
show: null, //A function to be called when the Wickedpicker is shown
clearable: false, //Make the picker's input clearable (has clickable "x")
};
$('.time').wickedpicker(options);
Then I create an input field to store the time data
<input id="time_field" name="time_field" class="form-control time" placeholder="Time">
When I save, the data that goes into the database has the format 'hh : mm'.
Then I display it again in the edit form as a value.
<input id="time_field" name="time_field" class="form-control time" placeholder="Time" value="{{ $post->time }}">
But, the data does not appear. Data only shows default data which is 12:35.
Every time I will edit the data, the time field always displays 12:35, even though I have set the value in the input according to the data from the database. However, when I look at the source page, data from the database appears in the value input section.
Then I tried using jquery. When I retrieve data values from input, the retrieved data remains 12.35 which is the default data from wickedpicker.
var time = $('.time').val();
console.log(time) // output 12:35
also
var time = $('.time').wickedpicker('time');
console.log(time) // output 12:35
How do I set the time in the input field on wickedpicker from the database?
def = { twentyFour: true, timeSeparator: ':'};
signInPicker = $('#SignIn').wickedpicker(def);
signOffPicker = $('#SignOff').wickedpicker(def);
$.ajax(top.$.rootUrl + '/Area/Controller/Action', function (data) {
signInPicker.wickedpicker('setTime', 0, data.SignIn);
signOffPicker.wickedpicker('setTime', 0, data.SignOff);
});
Yesterday I was trying to translate a problem I had to solve in React, to Svelte, and I can't figure it out.
The problem is the following:
I have 3 inputs each one of them holds a percentage.
The 3 percentages altogether cannot add more than 100.
I have a fourth input, it's disabled, so it just shows the remaining percentage to 100%
In react is fairly easy, declare a function that takes, the event and a variable to know which input I'm taking the event from. Do the proper validations and done.
Sadly in svelte I have almost 0 experience, and I don't know how to tackle it.
This the code so far (spoiler alert it does not even get close to do what is supposed to do).
Svelte REPL
Running a console.log to show the value of sp1, inside the function that validates it, and outside the function (before and after the function), shows what I do expect:
Before the function (before): value in the input
Inside the function: value validated
Outside the function (after): value validated
So the validation and assignment of the correct value takes place, nonetheless the input keep showing wrong value (ex: input shows 112 and the value should be 100).
A more dynamic way to do this would be using arrays.
let inputs = [{
value: 0,
color: 'GRAY'
}, {
value: 0,
color: 'DARKSLATEGRAY'
}, {
value: 0,
color: 'TEAL'
}];
This would also make calculations easier since we can use the array methods. It would also enable us to use each blocks which remove redundant code. Then we will use a function called validate and pass the index of the current input to it. Using the input we can calculate the maximum possible value that can be entered in that input and set the input if it crosses that maximum value. This validate function will be called from the template on the input event.
Here's the code.
<script>
let total = 100;
let inputs = [{
value: 0,
color: 'GRAY'
}, {
value: 0,
color: 'DARKSLATEGRAY'
}, {
value: 0,
color: 'TEAL'
}];
$: spOthers = total - inputs.map(x => x.value || 0).reduce((a, b) => a + b);
function validate(index) {
let maxInput = total - inputs.map(x => x.value).filter((x, i) => i !== index).reduce((a, b) => a + b);
if (inputs[index].value > maxInput) {
inputs[index].value = maxInput;
}
}
</script>
{#each inputs as {value, color}, i}
<div class='input-container'>
<div class='square' style="background-color: {color}" />
<input type="number" min="0" class='input' bind:value={value} on:input={() => validate(i)} />
</div>
{/each}
<div class='input-container'>
<div class='square' style="background-color: DARKORANGE" />
<input type='number' class='input input-others' bind:value={spOthers} disabled/>
</div>
Note: I have omitted the styles above as there are no changes in them.
Here is a working REPL.
Nice. You can also do:
$: spOthers = inputs.reduce((a, c, i, inputs) => a + c.value, 0);
function validate(index) {
const delta = spOthers - total;
if (delta > 0) {
inputs[index].value -= delta;
}
}
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/
I'm using cleave.js for a date input field in my Vue.js project.
The option that I passed was this:
<cleave :options="{
date: true,
datePattern: ['m', 'd','Y']
}" id="date-input" placeholder="MM/DD/YYYY" type="text"></cleave>
How do I set maximum value for Y ?
Cleave is an input formatting library and really nothing more. It's up to you to determine how you want to limit user input. Fortunately it offers an api for accessing the underlining raw input value. The API can be found here.
Youll need to write an event listener to check the users input and cap the value as you need.
I did that for card security number and working fine
const cardCCV = new Cleave("#cardCCV", {
numeral: true,
stripLeadingZeroes: false,
onValueChanged: function (e) {
const maxSize = 3;
if (e.target.rawValue.length > maxSize) {
cardCCV.setRawValue(e.target.rawValue.substring(0, maxSize));
}
},
});
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);
}
}
});