jquery.nstSliders.js - Nestoria range slider jQuery plugin
-
date post
14-Sep-2014 -
Category
Internet
-
view
487 -
download
5
description
Transcript of jquery.nstSliders.js - Nestoria range slider jQuery plugin
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