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.

1. Nestoria Price Sliders
Savio Dimatteo, Lokku HQ, London, 1 May 2014.

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

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

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

5. Why The Problem
crazy cheap ultra expensive
300px wide !
● we would need more pixels...

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

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

8. it doesn’t matter
One answer

9. Solution
any distribution of listing prices pixel to value mapping
value to pixel mapping
400£ 31px
31px 400£

10. 1) compute the price histogram
● Any number of buckets is fine, we use 128.
The Idea
price (buckets)
count

11. The Idea
2) extract a normalized probability density function (PDF)
from price histogram.
note: sums to sliderWidth
price (buckets)
count
price (buckets)
sliderWidth
0

12. The Idea
3) transform PDF -> CDF , a cumulative density function.
note: doesn’t decrease
price (buckets)
sliderWidth
0
price (buckets)
sliderWidth
0

13. The Idea
4) use CDF to obtain the mappings
price (buckets)
sliderWidth
0

14. The Idea
4) pixel-to-value mapping
sliderWidth
0
price
pixel

15. The Idea
4) value-to-pixel mapping
sliderWidth
0
price
pixel

16. Awesome approach
● flat histogram -> linear increments
● two prices -> valid histogram
● one price -> a flat histogram!
● negative prices -> histogram is an ARRAY at the end…

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

18. Sharp price distributions
0px
270px
Bucket 0 Bucket 1

19. Sharp price distributions
PriceBucket

20. Sharp price distributions
0px
270px
0 £ 2000 £

21. Sharp price distributions
0px
270px
0 £ 2000 £
# of pixels to cover

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

23. pixel-to-value
● result of the interpolation
● stored into an array for direct lookup
0 1 2 ….. sliderWidthPx
34£ 56£ 78£ 129£ … … … … … …. … …. … max£

24. 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£

25. Releasing jquery.nstSlider.js
Grunt 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

26. 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',

27. Releasing jquery.nstSlider.js
Add 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/

28. Releasing jquery.nstSlider.js
Test 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

29. Releasing jquery.nstSlider.js
Testing 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!

30. 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;
})
}
}
},

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

32. Conclusions
jQuery 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!

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