Implementing jwilhem's slider on a Mapbox map in Rails - ruby-on-rails

Question

Trying to implement D Wilhem's Leaflet Slider, a front end to the JQuery UI slider in Rails. I get the error ReferenceError: Can't find variable: L. I've looked at lots of discussions and imagine I've mixed up my syntax. The page loads and 1) my data shows up, 2) the slider control shows up, but the slider doesn't function and I get then aforementioned error.
function makeMap() {
L.mapbox.accessToken = $('body').data("mapboxToken");
var map = L.mapbox.map('map', 'mtnbiker.d7jfhf8u') // Was: mapbox.streets
.setView([34.040951, -118.258579], 13);
L.control.fullscreen().addTo(map);
var featureLayer = L.mapbox.featureLayer()
.loadURL('map/point_data.geojson')
.addTo(map);
var featureLayer = L.mapbox.featureLayer()
.loadURL('map/line_data.geojson')
.addTo(map);
var sliderControl = L.control.sliderControl({range: true, alwaysShowDate: true, timeStrLength: 10, layer: featureLayer});
map.addControl(sliderControl);
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 10));
featureLayer.on('ready', function(e) {
map.fitBounds(featureLayer.getBounds());
});
}
application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'leaflet.js'
//= require leaflet
//= require_tree .
The map loads with data (points and lines) and non-functioning slider at localhost. Points are loading at Heroku, but not the lines nor slider. https://secure-shore-68966.herokuapp.com/map.
Answer:
After weeks of trying different things, a friend from MaptimeLA was able to sit down with me at a meeting and found a type. She is very familiar with Rails and debugging.
application.js was:
// require jquery.ui
// require jquery.ui.widget
Fixed
//= require jquery-ui
//= require jquery.ui.widget
Thanks to all who chimed in.
All the code is at https://bitbucket.org/MtnBiker/crores5/.
PS. I can't see the checkbox to say I want to answer my own question.

Answer 1

Looking at your code in the link, you load the following scripts in this order:
<script src="/assets/application-665a36b2268b441400787c68e9f08977c28cc33814ce32a46439c27016b720ec.js" data-turbolinks-track="true"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
I suspect that something is loading out of order or that L is being dropped someplace. Also I do not see where the core jQuery is being loaded.
Looking at the Demo, they load the following:
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script>
So I think all you're missing is the core jQuery and Maybe the LeafletJS. Here is a working JSFiddle based on the example they provide.
https://jsfiddle.net/Twisty/sr0sjzk2/

Answer 2

This is not a complete answer. But working through the asset pipeline in Rails and making changes I've eliminated the error. The problem was probably that in using various tutorial, I'd put in different versions of Leaflet or jQuery in different places in the Ruby on Rails app.
However the page still doesn't work correctly. I get TypeError: $("#leaflet-slider").slider is not a function. (In '$("#leaflet-slider").slider', '$("#leaflet-slider").slider' is undefined) error on localhost. The error is in D Wilhelm's SliderControl.js. On Heroku, no errors but no slider. I'll post a new question. https://secure-shore-68966.herokuapp.com/map.
Thank you Twisty for your help.