freqdec / fd-slider Goto Github PK
View Code? Open in Web Editor NEWAn Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution
License: Other
An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution
License: Other
The parent block is hidden during creation, and the slider when shown, gets stuck at the 0 position, but value is set to about half to max of whats possible when you try to move it. Resizing browser window seems to repair the slider, nob moves to its correct position and you are once again able to change the value.
reproduced: http://test.wendell.fi/fdslidertest/test.html
IE8 seems to handle this without problems tho
https://github.com/freqdec/fd-slider/blob/master/css/fd-slider.css#L230 is incorrect as none is not ain the list of valid values for the bottom property https://developer.mozilla.org/en-US/docs/CSS/bottom
Thanks for the great script.
I had a client request that if his user enters a value directly into the input element, then this should overide the "step" and possibly also the formatting rules.
However, if the slider handle is activated it should behave as normal.
See: https://twitter.com/#!/freqdec/status/184989550270091264
I've hacked the script as suggested and I thought I'd share the result just in case it's of interest.
userInputSnap = options.userInputSnap || false, // Option: Do we want user input to snap or not?
userManualInput = false, // boolean: has the user manual entered a value in the input
function onInputChange(e) {
userSet = true;
// Check options and set userManualInput if required
userInputSnap === true ? userManualInput = true : userManualInput = false;
valueToPixels(tagName == "input" ? parseFloat(inp.value) : inp.selectedIndex);
updateAriaValues();
userManualInput = false; // reset the value to default false
};
function setInputValue(val) {
....
if(val != "" && userManualInput !== true) { // before we snap check that the user hasn't manually entered number into input.
val = (min + (Math.round((val - min) / step) * step)).toFixed(precision);
};
....
};
I hope that makes sense.
If I dynamically add a slider to the page, it does not seem to render correctly unless I switch to a different browser tab. Perhaps I'm doing something terribly wrong.
Coffeescript for adding a slider to an existing input of given name:
createSlider = (name) ->
fdSlider.createSlider({
inp:document.getElementById(name)
step:1
maxStep:1
min:0
max:100
animation:'tween'
forceValue:true
callbacks: {
"change":[updateValue]
"create":[sliderCreated]
}
})
The input the slider is being created for is also being dynamically added via a jQuery template, so that may be convoluting things.
Again, if I simply switch to another browser tab and back, it works fine, so that would lead me to believe there's some issue with how it's being (re)drawn. Is there a way to manually call redraw() on the slider within the create event?
It works very fine on iOS devices but not on android devices.
I want to handle events at the document level, but your stopEvent() function is extremely aggressive. Could you preventDefault without stopping propagation? Do you even need to preventDefault since the elements are all spans, it shouldn't have any default effect.
Otherwise, I don't really understand why you need to stop the event from progressing normally.
Thanks!
Vertical sliders are broken in polyfill mode in browsers that natively support input type=range. You can see this by visiting the demo in Chrome: http://www.frequency-decoder.com/demo/fd-slider/
It would be great to be able to easily format the value in aria-valuetext with a custom function, e.g. by passing a formatter function to options when initializing the slider. This is especially useful for sliders with non-numerical semantics, e.g. time slider or year date slider.
By the way, awesome work! I've been thinking about writing such a component but found yours to be just about perfect! Thanks a lot! Going to use this for the next version of http://suncalc.net/.
In contrast to native sliders, fd-sliders don't get reset when <input type="reset">
is pressed.
Example: http://jsfiddle.net/fgnass/8HU6C/
It seems the 'change' event handler that I have registered is lost in IE9. I'm using jQuery to do something like:
$(rangeInput).on("change", function(event) {
window.alert("changed...");
});
If I trigger fdSlider.onDomReady();
before of after that I'm not getting my changes in IE9.
The weird thing is that if I show the corresponding input field (by disabling the display: none;
style) I can see that that field is actually being updated with the correct values when I move the slider. It's just that I don't get any change events apparently.
Firefox (11) , IE8, IE7 work fine.
Callbacks are run in global scope which is.. well awkward.
run in scope of the input:
fd-slider.js:~450
If you programatically update the min, max, or step attributes of the original input they aren't reflected in the shim'ed element.
See http://twitlabs.net/fd-slider/ if you test in a browser where the native element is available, when the max is updated you'll notice the slider handle jumps to the appropriate position. With the shim, nothing happens and the new max isn't reflected in the UI.
See https://bugzilla.mozilla.org/show_bug.cgi?id=872351: FF21 shipped with some partial code for the native implementation which will ship in FF22/23, which has the key problem of setting display: inline-block !important;
on all <input type="range">
elements, which cannot be overridden by normal CSS rules.
If they don't decide to ship a point release with a fix, we're stuck needing to do something ugly like a version sniff and wrapping the original input control in a display:none span. This works - see http://jsfiddle.net/acdha/pvNV3/2/embedded/result/ - but it's definitely ugly.
there are 2 function valueSet(tf) {},does it a bug?
so the function setValueSet(sliderId, tf) doesn't work
358 function valueSet(tf) {
tf = !!tf;
if(tf != userSet) {
userSet = tf;
valueToPixels(getWorkingValueFromInput());
}
}
1146 function valueSet(tf) {
userSet = !!tf;
}
See https://github.com/freqdec/fd-slider/blob/master/js/fd-slider.js#L36
Here’s a screenshot: http://i.imgur.com/vETbA.png
No callbacks currently receive the userSet parameter. The doc states that they do.
How may I set sliders to a new value. I have tried fdSlider.setValueSet('id1');... fdSlider.setValueSet('id6');,... This don't work for all fields and not always for the same fields.
When I bind for change event on input element, it doesn't fired. And where I can see example of code that demonstrate event binding?
I'd like to use fd-slider in a way that doesn't require content generation scripts to become dependent on it, so the ones I have do callbacks after generating new sliders. I'd like to use fd-slider to then take the html element created and work its magic on that element to make it compatible with IE9 and FF, but it doesn't look like there's a function that lets me do something like:
var inp = document.createElement("input");
inp.type = "range";
fdsliter.convertToSlider(inp);
Can this already be done and am I just not finding it in the docs, or is this effectively a feature request for something that would have to be added to fd-slider?
I needed this
.fd-slider bar { width: auto; }
A proposal to add to wiki or readme:
To use fd-slider with AngularJs by a directive:
.directive('fdSlider', ["$parse", function ($parse) {
return function (scope, elm, attrs) {
var scaleStr = attrs.scale || "{}";
var scale = $.parseJSON(scaleStr);
if ("fdSlider" in window) {
fdSlider.createSlider({
// Associate an input
inp: elm[0],
// Declare a step
step: attrs.step || 1,
// Declare a maxStep (for keyboard users)
maxStep: attrs.step || 1,
// Min value
min: attrs.min || 1,
// Max value
max: attrs.max || 100,
// Define a scale (multiple points supported, I'm just using one for the
// demo)
scale: scale,
callbacks : {
"change": [function(inp) {
scope.$apply(attrs.sliderModel + "=" + inp.value);
}]
},
// Use the "jump to click point" animation
animation: "jump"
});
}
};
}]);
and a html sample:
<input type="number" step="1" min="10" maxStep="100" max="30000"
scale='{"25": "10","50": "100","75": "1000","85": "3000","90": "10000"}'
slider-model="myScopeModel" fd-slider="" ng-model="myScopeModel"></div>
And thank you very much for your excellent plugin.
Alexandre Richonnier
Currently the website that hosts the demos is down: http://downforeveryoneorjustme.com/http://www.frequency-decoder.com/
I'd suggest moving all demos to a separate GitHub page (gh-pages) so that they're always online and self-contained in the repo.
If a slider is position:fixed, clicking on the range bar will not animate the drag-handle to the click-point. The code needs updated to correctly calculate the click position when fixed positioning is used.
I'm getting an error on line 446 in reference to cbObj when I try to pass in a callback.
Looks like it was removed in the latest commit.
This is not an urgent issue for me as I don't have to use the scale
option, but figured I'd post about it in case others run across it.
I have sliders that are hidden during creation, and thus when I unhide them I call updateSlider
for each. I was also using the scale
option (set to 50:#, where # varied for each slider). Some sliders would not be able to move at all (they'd have a range width of 1px), while others would only be movable from 50% and up. A few worked just fine. I suspect the issue might have to do with what values were being used for the 50% scale, but as using the scale
option is not critical for my application (at least as far as I can tell at the moment) I haven't done further testing. Removing the scale
option from the createSlider
call appears to fix things.
I hope this will be helpful to others. :)
The events may be MSPointer events which is not handles by the library.
Please respond asap.
Since some of the oldie rules are completely commented out, it might make sense to move them to a separate sheet where the are actually implemented.
right now, making fd-slider do its thing will create visible sliders even for inputs whose CSS display is set to none, visibility is set to hidden or opacity is set to 0. It might be a good idea to look into whether it is possible to mirror the display, visibility and opacity values for the input element that is being fd-slider'd, so that currently hidden inputs don't suddenly turn into visible sliders, and toggling the visibility of the input element (through jQuery or what have you) just works, rather than requiring fd-slider-specific script to be written to make sure visibility applies to both the input and its corresponding fd-slider object.
Need to change line 469 within the CSS file to read:
*background:transparent url(mhtml:;-)/fd-slider.css!blank) repeat;
and not
*background:transparent url(mhtml:;-)/fd-slider.css!handleglow) repeat;
Shouldnt the stopDrag function also call finalise or am i doing it wrong? sidenote i am not using the tween.
IE7 is throwing an “invalid argument” error on this line: https://github.com/freqdec/fd-slider/blob/master/js/fd-slider.js#L1008
I think it’s because handle.offsetLeft
is returning negative values in IE7.
Removing that line effectively seems to prevent the error from being thrown, but then of course the slider bars are broken.
Note that your script works fine on its own; only now that I added it to a page with a lot of other scripts in it (not mine) this issue comes up. Before I dive into all the other scripts used on that page, could you please tell me if you’ve seen this before by any chance? Any ideas on how to fix it?
What is the license for fd-slider?
I didn't see any license mentioned in the README or fd-slider.js.
Thanks
Its all about shim usability.
This does not fix the issue of events added to the input from javascript through addEventListener, which im not sure you can fix. Haven't gotten that far atleast.
Anyways, since you said that you'd take a look at it on the weekend, i thought i'd submit what i've come up with so far.
works in atleast IE6,8 and FF3.6 as i would expect.
fd-slider.js:224-236
options.maxStep = options.step * 2;
var c;
if ((c = inp.getAttributeNode('onchange')) != null) {
var cb = function() { (new Function( c.value )).call(options.inp); };
options.callbacks.change = [];
options.callbacks.change.push(cb);
}
delete c;
destroySingleSlider(options.inp.id);
sliders[options.inp.id] = new fdRange(options);
};
The test whether the input is disabled should account for getAttribute returning "disabled".
Before:
if(inp.getAttribute("disabled") == true)
After:
if(inp.getAttribute("disabled") == true || inp.getAttribute("disabled") == "disabled")
Hi, Is there any way to change step at run time?
Hi!
Is there a way to force the range replacement/polyfill for every browser (even those with support for the range input)?
Thanks a lot!
It would be very helpful if the README could document that this code is released under a dual MIT/GPL2 license. Currently this can only be found in the source for the JavaScript file.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.