jquery.nstsliders.js - nestoria range slider jquery plugin
Post on 14-Sep-2014
486 views
DESCRIPTION
Nestoria range sliders have been reimplemented as a jQuery plugin. This is mainly because existing range sliders cannot be used comfortably when it comes to handle dynamic price ranges. At Nestoria we display properties with dynamic, wide price ranges, and our design allows to dedicate only a few pixels for the price range slider. We needed a range slider control that could make the best out of these few available pixels. In this talk the author explains details of the implementation of the part of jQuery.nstSlider.js that solves this porblem, and provides a more general introduction about open sourcing jQuery plugins.TRANSCRIPT
Nestoria Price SlidersSavio Dimatteo, Lokku HQ, London, 1 May 2014.
Dynamic Price Sliders● users filter by price through a range slider
● dynamic price sliders: range changes based on result set
● calculate the potential price range
The min. and max. price calculated on the listings as if the price filter wasn't set.
Why “Potential”● users specifies the price multiple times
○ e.g., first handle, second handle, first handle again
● the other handle should stay fixed
● ok to move handles when other elements are used
The Problem● a lot of listings falls within a certain price range
● a few listings have prices outside that range
● wide wide range!
crazy cheap ultra expensive
Why The Problem
crazy cheap ultra expensive
300px wide !
● we would need more pixels...
Use a non linear scale.
● many listings in price sub-range -> use many pixels
● a few listings that distort the range -> use a few pixels
Squeezing prices
● are most of the listings grouped towards the beginning of the price range?
● are they grouped around few multiple ranges?
● are they evenly distributed over a certain price range in certain locations?
Questions
it doesn’t matter
One answer
Solution
any distribution of listing prices pixel to value mapping
value to pixel mapping
400£ 31px
31px 400£
1) compute the price histogram
● Any number of buckets is fine, we use 128.
The Idea
price (buckets)
count
The Idea2) extract a normalized probability density function (PDF) from price histogram.
note: sums to sliderWidth
price (buckets)
count
price (buckets)
sliderWidth
0
The Idea3) transform PDF -> CDF , a cumulative density function.
note: doesn’t decrease
price (buckets)
sliderWidth
0price (buckets)
sliderWidth
0
The Idea4) use CDF to obtain the mappings
price (buckets)
sliderWidth
0
The Idea4) pixel-to-value mapping
sliderWidth
0
price
pixel
The Idea4) value-to-pixel mapping
sliderWidth
0
price
pixel
Awesome approach● flat histogram -> linear increments
● two prices -> valid histogram
● one price -> a flat histogram!
● negative prices -> histogram is an ARRAY at the end…
Implementation is funny● what you think you would have
● what do you actually have
price (buckets)
sliderWidth
0
36 37
340 £ 350 £
56px
76px
56px
76px
Sharp price distributions
0px
270px
Bucket 0 Bucket 1
Sharp price distributions
PriceBucket
Sharp price distributions
0px
270px
0 £ 2000 £
Sharp price distributions
0px
270px
0 £ 2000 £
# of pixels to cover
Solution: Interpolation● apply a series of (linear) interpolation steps● one step:
a : previous price (interpolate from)
b : next price (interpolate to)
n : number of intermediate pixels to “cover”
0 £(a)
270 £(b)
pixel-to-value● result of the interpolation● stored into an array for direct lookup
0 1 2 ….. sliderWidthPx
34£ 56£ 78£ 129£ … … … … … …. … …. … max£
value-to-pixel…
1. binary search in the array of values○ find closest known prices P1, P2 s.t. P1 <= price <= P2
2. find the index of the closest known price -> place the handle at that pixel.
0 1 2 ….. sliderWidthPx
34£ 56£ 78£ 129£ … … … … … …. … …. … max£
Releasing jquery.nstSlider.jsGrunt is truly a blessing: grunt-init jquery
● Gruntfile.js with uglify, concat, clean, jshint, watch, qunit● manifest for jquery plugin registry● manifest for npm package● README/LICENCE/CONTRIBUTING.md● provides a banner task to actually write an header in your
minified javascript
Releasing jquery.nstSlider.js
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.company %>;' +
' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
Releasing jquery.nstSlider.jsAdd an addictive demo page (important!)● commit index.html and assets in gh-pages branch of your
github repository
● make something that works and looks nice
● be inspired: http://kenwheeler.github.io/slick/
Releasing jquery.nstSlider.jsTest test test!● I converted all jasmine tests into qUnit tests (crazy)
○ jQuery UI uses qUnit○ jQuery community traditionally uses qUnit
● qunit felt more mature and simpler than jasmine○ less behaviour oriented
Releasing jquery.nstSlider.jsTesting across jQuery versions!● Grunt is truly a blessing
● grunt-connect
○ allows to run a web server that hosts the tests
○ test specific versions of jQuery in one go!
Releasing jquery.nstSlider.js grunt.registerTask(‘test’, [‘connect’, ‘jshint’, ‘qunit’]);
qunit: {
files: ['test/**/*.html'],
all: {
options: {
urls: ['1.6.4', … , '2.0.0b1', '2.1.1-rc2'].map(function(version) {
return 'http://localhost:<%= connect.server.options.port %>/test/nstSlider.html?jquery=' + version;
})
}
}
},
Conclusions● typical example in which simple reasoning ends up in more
complex and detailed implementation
● a really exciting experience with open sourcing the sliders!
● 80% of people like it according to Reddit upvotes
ConclusionsjQuery plugin project:● releasing the plugin was fast after all! (just one night!)● visual projects trigger peoples’ imagination when requesting
new features...● people care about accessibility● hard to test :-)● Grunt is truly a blessing!
○ Use Grunt for your JS projects!
the end
Thanks
github: https://github.com/lokku/jquery-nstslider/
reddit: http://www.reddit.com/r/hackernews/duplicates/249rw3/fully_customizable_jquery_sliders_singledouble/
hackernews: https://news.ycombinator.com/item?id=7665894
youtube: https://www.youtube.com/watch?v=xN5AfudLHws
bower registry: jquery-nstSlider