Your SlideShare is downloading. ×
jquery.nstSliders.js - Nestoria range slider jQuery plugin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jquery.nstSliders.js - Nestoria range slider jQuery plugin

635

Published on

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 …

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.

Published in: Internet, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
635
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×