freqdec/fd-slider

An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution

HTML5 Input Range Polyfill/Unobtrusive Accessible Slider

An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution.

At a glance

• The script can be used as an HTML5 range polyfill solution
• Introduces a gradient filled “range bar” for quick visual feedback
• iOS Touch screen friendly
• Arrives with a new CSS3 skin that degrades gracefully in older browsers
• Unobtrusive & namespace friendly
• Conforms to the WAI-ARIA defined role of “slider”
• Keyboard accessible
• Recalculates onresize so suitable for use within responsive designs
• Available under a mixed MIT/GPL2 license

Quick Demos

Apologies to all – none of the online demos currently work as my website is, alas, no more. I am in the process of moving the demos to Github pages, please bear with me!

The demos are bundled with the repo though, so the adventurous can download the source and open the relevant HTML pages in the browser.

• Mixed HTML5 polyfill and Javascript API demo
• Using yepnope and Modernizr to load dependencies only when required for HTML5 polyfills
• CSS generated content tooltip extension

fd-slider's Issues

Check if "disabled" attribute is true or "disabled"

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")

Wiki AngularJs binding sample

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

Vertical sliders are broken in polyfill mode in range-capable browsers

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/

Value custom formatting

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/.

Slider breaks if hidden if Scale is used (even if updateSlider is called on unhide)

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. :)

Allow user's manual input to override snap

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.

Global options:

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 

Method: onInputChange()

 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                                  
}; 

Method: setInputValue():

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.

Slider doesn't work smooth with PhoneGap android app

It works very fine on iOS devices but not on android devices.

How can I change step at run time?

Hi, Is there any way to change step at run time?

extra styles

I needed this

.fd-slider bar { width: auto; }

is there a reload/scan/buildFromElement(id) function?

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?

Weird Unicode character in source

See https://github.com/freqdec/fd-slider/blob/master/js/fd-slider.js#L36

Here’s a screenshot: http://i.imgur.com/vETbA.png

Modifications to the underlying range input's min/max/step attributes are ignored

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.

Firefox 21 bug causes the original range element to remain visible

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.

Change eventhandler not triggered in IE9

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.

Demo is down

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.

Callback scope

Callbacks are run in global scope which is.. well awkward.

run in scope of the input:
fd-slider.js:~450

• function callback
  for(var i = 0, func; func = callbacks[type][i]; i++) {
  func.call(cbObj.elem, cbObj);
  };

usetSet value not passed in callback object

No callbacks currently receive the userSet parameter. The doc states that they do.

Finalise also on stopDrag?

Shouldnt the stopDrag function also call finalise or am i doing it wrong? sidenote i am not using the tween.

Rendering error when dynamically adding sliders

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?

matching the input's visibility

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.

Split out oldid styles to separate sheet

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.

position:fixed sliders not reacting correctly to mouse events

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.

cbObj is gone!

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.

there are 2 function valueSet(tf) {},does it a bug? so the function setValueSet(sliderId, tf) doesn't work

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;
}

None is not a valid value for bottom in CSS

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

IE7 error: Invalid argument at line 1008

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?

Force range replacement for every browser?

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!

What is the license for fd-slider

What is the license for fd-slider?

I didn't see any license mentioned in the README or fd-slider.js.

Thanks

Can't drag the sliders in Microsoft Surface.

The events may be MSPointer events which is not handles by the library.
Please respond asap.

set slider from new value from input field

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.

How can I bind for slider change event?

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?

Please don't stopPropagation.

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!

html5shim event attributes

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);
                    };

input type="reset" not supported

In contrast to native sliders, fd-sliders don't get reset when <input type="reset"> is pressed.

Example: http://jsfiddle.net/fgnass/8HU6C/

Specify license in README

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.

Slider breaks if parent block is hidden during creation

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

• Relevant for (atleast): FF 11, Chrome 18, Opera 11.62

IE8 seems to handle this without problems tho

Latest CSS file shows repeating handle image in IE6 & IE7

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;