jquery.nstSliders.js - Nestoria range slider jQuery plugin
-
date post
14-Sep-2014 -
Category
Internet
-
view
474 -
download
5
description
Transcript of jquery.nstSliders.js - Nestoria range slider jQuery plugin
![Page 1: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/1.jpg)
Nestoria Price SlidersSavio Dimatteo, Lokku HQ, London, 1 May 2014.
![Page 2: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/2.jpg)
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.
![Page 3: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/3.jpg)
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
![Page 4: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/4.jpg)
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
![Page 5: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/5.jpg)
Why The Problem
crazy cheap ultra expensive
300px wide !
● we would need more pixels...
![Page 6: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/6.jpg)
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
![Page 7: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/7.jpg)
● 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
![Page 8: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/8.jpg)
it doesn’t matter
One answer
![Page 9: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/9.jpg)
Solution
any distribution of listing prices pixel to value mapping
value to pixel mapping
400£ 31px
31px 400£
![Page 10: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/10.jpg)
1) compute the price histogram
● Any number of buckets is fine, we use 128.
The Idea
price (buckets)
count
![Page 11: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/11.jpg)
The Idea2) extract a normalized probability density function (PDF) from price histogram.
note: sums to sliderWidth
price (buckets)
count
price (buckets)
sliderWidth
0
![Page 12: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/12.jpg)
The Idea3) transform PDF -> CDF , a cumulative density function.
note: doesn’t decrease
price (buckets)
sliderWidth
0price (buckets)
sliderWidth
0
![Page 13: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/13.jpg)
The Idea4) use CDF to obtain the mappings
price (buckets)
sliderWidth
0
![Page 14: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/14.jpg)
The Idea4) pixel-to-value mapping
sliderWidth
0
price
pixel
![Page 15: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/15.jpg)
The Idea4) value-to-pixel mapping
sliderWidth
0
price
pixel
![Page 16: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/16.jpg)
Awesome approach● flat histogram -> linear increments
● two prices -> valid histogram
● one price -> a flat histogram!
● negative prices -> histogram is an ARRAY at the end…
![Page 17: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/17.jpg)
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
![Page 18: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/18.jpg)
Sharp price distributions
0px
270px
Bucket 0 Bucket 1
![Page 19: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/19.jpg)
Sharp price distributions
PriceBucket
![Page 20: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/20.jpg)
Sharp price distributions
0px
270px
0 £ 2000 £
![Page 21: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/21.jpg)
Sharp price distributions
0px
270px
0 £ 2000 £
# of pixels to cover
![Page 22: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/22.jpg)
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)
![Page 23: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/23.jpg)
pixel-to-value● result of the interpolation● stored into an array for direct lookup
0 1 2 ….. sliderWidthPx
34£ 56£ 78£ 129£ … … … … … …. … …. … max£
![Page 24: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/24.jpg)
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£
![Page 25: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/25.jpg)
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
![Page 26: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/26.jpg)
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',
![Page 27: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/27.jpg)
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/
![Page 28: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/28.jpg)
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
![Page 29: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/29.jpg)
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!
![Page 30: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/30.jpg)
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;
})
}
}
},
![Page 31: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/31.jpg)
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
![Page 32: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/32.jpg)
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!
![Page 33: jquery.nstSliders.js - Nestoria range slider jQuery plugin](https://reader031.fdocuments.us/reader031/viewer/2022013107/541658188d7f72336c8b4a5d/html5/thumbnails/33.jpg)
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