I am putting together an HTML5 form for music teachers so they can classify their music library a bit easier. One of the requested elements is a double handled range slider that would be able to define the range of a particular piece. This is all fine if we were talking 0 to 100, but we're talking G-Flat 3 to B5, a series of arbitrary values that wouldn't normally be found on a range slider.
What I'm thinking of doing is creating an array of all the different note ranges from G-Flat 3 to B5 (lowest to highest), and then somehow mapping those to a double handled range slider. Problem is, I don't know how to do that, nor do I know if it is even possible.
In essence, I would like to create an array:
Array = ['Gb3', 'G3', 'G#3', 'Ab3', 'A3',... 'A#5', 'Bb5', 'B5'];
Somehow match those up to numeric values:
0 = 'Gb3';
1 = 'G3';
2 = 'G#3';
And then map those to a double handle range slider.
Any one know if there is a library, or plugin or magic toadstool that can point me in the right direction?
UPDATE: I want to thank EVERYONE who posted to this. There are so many fantastic answers, I'm having a very difficult time choosing "the" answer.
I found this polyfill for a now-abandoned proposal to add a multiple attribute to the <input type="range"> spec. It's simple and works well enough, but has an unfortunate bug: Event handlers aren't fired for when the second handle is moved. It's pretty easy to work around, though:
const notes = ['Gb3', 'G3', 'G#3', 'Ab3', 'A3', /* ... */ 'A#5', 'Bb5', 'B5'];
function handleChange() {
const { valueLow, valueHigh } = this;
const lowNote = notes[parseInt(valueLow, 10)];
const highNote = notes[parseInt(valueHigh, 10)];
console.log('%s to %s', lowNote, highNote);
}
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input[type=range]');
input.addEventListener('input', handleChange);
input.nextElementSibling.addEventListener('input', handleChange.bind(input));
});
<script src="https://cdn.rawgit.com/LeaVerou/multirange/gh-pages/multirange.js"></script>
<link href="https://cdn.rawgit.com/LeaVerou/multirange/gh-pages/multirange.css" rel="stylesheet"/>
Change me: <input type="range" min="0" value="0,7" max="7" step="1" multiple>
As you can see, I've set the <input>'s min attribute to 0, max to the highest index in notes (notes.length - 1 == 7), and value to 0,7. In addition to adding an 'input' event handler to input, I've added the same handler to input.nextElementSibling. The latter is the generated "ghost" element which renders the second handle. It's necessary to bind the event handler to input because the "ghost" input doesn't have valueLow and valueHigh.
I would use a javascript object. Here is an example.
HTML
<input type="range" value='0' min='0' max='3'>
<div class='sound'></div>
jQuery
var obj = {
0 : 'Gb3',
1 : 'G3',
2 : 'G#3'
}
$('body').on('change', 'input[type=range]', function(){
var val = $(this).val();
$('.sound').text(obj[val])
});
Using jquery UI slider you can do something like this fiddle:
$(function () {
var note = ['Gb3', 'G3', 'G#3', 'Ab3', 'A3', 'A#5', 'Bb5', 'B5'];
$("#slider-range-min").slider({
range: true,
values: [0,7],
min: 0,
max: 7,
step: 1,
slide: function (event, ui) {
$("#amount").val(note[ui.values[0]]+ "-"+note[ui.values[1]]);
}
});
$("#amount").val(note[0]+ "-"+note[7]);
});
A similar question was asked here. The solution offered is to use the jQuery UI Slider.
To answer the part of your question specific to your case, you will probably need to build the array of possible values (like you've done above: notesArr = ['Gb3', 'G3' ... 'Bb5', 'B5']; and in the ui-slider code, set the min to 0 and the max to notesArr.length - 1. In the portion of the code that defines the label, use the integer value of the slider position to index into the array to get the string value to display.
I'm new to JavaScript and jQuery, I found this plugin which allows me to count the amount of words in a textbox. I was able to implement this into my form. However, what I would like to do is if the user adds more than 25 words it will give me an error.
I am using jquery validation in my form to validate.
The code I have in my Javascript is;
jQuery(document).ready(function($){
$('#textarea').simplyCountable({
counter: '#words',
countType: 'words',
maxCount: 25,
overClass: 'over',
countDirection: 'up'
});
var area = document.getElementById('textarea')
Countable.live(area, function (counter) {
console.log(counter)
})
});
When I view this on my page, I see the following;
My question is how can I get to Object > words?
Thanks in advance
Countable.live($('#textarea'), function (counter) {
var totalWOrdsCount = counter.words;
})
My JavaScript if statement isn't working properly. Keeps coming out false and I cannot figure out why. I hate to not put my text information here when posting this however not much more to say. Here is my code.
Should be returning true since am-pm is equal to true?
JavaScript
$(function($) {
$('.wordpress-timezone-js-time').each(function() {
var myUtc = $(this).data('utc');
var myUtcOffset = $(this).data('utc-offset');
var myAmPm = $(this).data('am-pm');
if (myAmPm == 'true'){
var amPmSet = '%I:%M:%S %p'; // 12 hour
} else {
var amPmSet = '%H:%M:%S'; // 24 hour
}
$(this).jclock({
utc: myUtc ,
utcOffset: myUtcOffset ,
format: amPmSet,
})
})
});
HTML Element
<p>EST: <span class="wordpress-timezone-js-time" data-utc="true" data-utc-offset="-5" am-pm="true"></span></p>
Thanks in advance!
Use attr function if you need to retrieve the attribute value, i.e. :
$(this).attr('am-pm')
Edit, for completeness:
Or, as others suggested, you could change am-pm to data-am-pm and keep your call $(this).data('am-pm').
Change you code to this one.
<p>EST: <span class="wordpress-timezone-js-time" data-utc="true" data-utc-offset="-5" data-am-pm="true"></span></p>
instead of "am-pm" put it as "data-am-pm", if you're using data attribute to fetch the data in javascript. Otherwise $(this).attr('am-pm') is correct.
I would like use control buttons in JsCarousel slider.
In my code i make function for initialization carousel:
<script type="text/javascript">
function InitializationJsCarousel(obj){
var carousel = $(obj).jcarousel({
// Core configuration goes here
});
$(obj)
.on('jcarousel:create jcarousel:reload', function() {
var element = $(this),
width = element.innerWidth();
// This shows 1 item at a time.
// Divide `width` to the number of items you want to display,
// eg. `width = width / 3` to display 3 items at a time.
width = width / 3;
element.jcarousel('items').css('width', width + 'px');
})
.jcarousel({
// Core configuration goes here
});
$('.jcarousel-prev').jcarouselControl({
target: '-=1',
carousel: carousel
});
$('.jcarousel-next').jcarouselControl({
target: '+=1',
carousel: carousel
});
}
$(function(){
...
InitializationJsCarousel('.jcarousel');
...
});
</script>
But as i can see jcarouselControl not working. I see console,but errors not found. It problem becouse control buttons not working...
Tell me please why control buttons(jcarouselControl) not working and how make that theys work?
Code working for me.
First check that include jquery.jcarousel-control.js or jquery.jcarousel-control.min.js
Second check class name for control element (in your code it jcarousel-prev). Check name in js and in html.
I design a selftracking frontend where participants enter numbers into a frontend. Whilst these are written into a database I want them to be instantly visualized. To do some calculations I use calx a jquery plugin (which allows for excel like computing). So I have form fields like:
<td><input name="name1" type="text" id="cc3" size="10" data-formula="($bb3/$aa3)*100">
data-formula presents the box then with a value. I now want to visualize this value (here in percent) as a bar (like a progressbar described here http://jsfiddle.net/Z6k3C/).
The Problem is, that I only have started working with js and jquery and I cannot figure out how I can parse the value from data-formula into the following code snippet so the bar changes dynamically with the entered numbers (not on click, on change)
$(function() {
var colors = [];
$("#slider").slider({
max : 200,
value: 10,
slide: function(event, ui) {
colors = (ui.value < 20) ? ['#f00','#000'] : ['#ff0','#000'];
colors = (ui.value > 50 && ui.value < 100) ? ['#080','#fff'] : colors;
colors = (ui.value > 100) ? ['#808','#fff'] : colors;
$(".ui-progressbar-value").css({'width' : ui.value + "%", 'backgroundColor' : colors[0] });
$(".ui-progressbar-text").css('color', colors[1]).text(ui.value + "%");
}
});
I hope you do understand my problem and I hope for your help.
Kind regards,
Jon
You can use keyup() for input to get value after every key pressed
See: http://jsfiddle.net/Z6k3C/78/
I had to add change function to slider to dynamicly change progressbar.