Rails 4 - Bootstrap Slider - dynamically popup tooltips for data ticks?

Question

I am trying to use the bootstrap slider in my Rails 4 application.

The Im function trying to use is shown in the gem dost bootstrap-slider-rails docs in this example.

I am trying to dynamically populate tooltip text based on the value of a data slider.

In my opinion, I have:

<input id="ex13" type="text" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/> 

Then in my js file I have:

jQuery (document) .ready (function () {

 $("#ex13").bootstrapSlider({ ticks: [ 10, 20, 30, 40, 50, 60, 70, 80], ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"], ticks_snap_bounds: 30, orientation: 'vertical', tooltip_position: 'left', enabled: false }); 

});

I have a model called TRL. This table has attributes called level (integer) and description (text).

The data slider value now shows the trl.level level. This part works fine, but I can't figure out how to make the formatting function work.

In the docs, I see that the formatter argument cannot be passed as a data attribute.

I tried adding it to the js method,

 $("#ex13").bootstrapSlider({ ticks: [ 10, 20, 30, 40, 50, 60, 70, 80], ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"], ticks_snap_bounds: 30, orientation: 'vertical', tooltip_position: 'left', enabled: false, formatter: "<%= @project.trl.description%>" }); 

This does not work. How to use formatting function in my slider?

ACCEPTING ASHITAK'S OFFER

I tried changing my js to:

 jQuery(document).ready(function() { $("#ex13").bootstrapSlider({ ticks: [ 10, 20, 30, 40, 50, 60, 70, 80], ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"], ticks_snap_bounds: 30, orientation: 'vertical', tooltip_position: 'left', enabled: false, // formatter: "<%= @project.trl.description%>" formatter: function(value) { return "<%= @project.trl.description%>"; } }); }); 

This attempt prints <% = @ project.trl.description%> instead of accepting the contents of this attribute and printing it. So, the next step to implementing this concept is how to transfer the data stored in the database to the js hint?

Answer 1

Try adding the description value to the data attribute in the input element, so when the input is displayed in html, this value is there. I added a data description attribute to your input

 <input id="ex13" type="text" data-description="<%= @project.trl.description%>" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/> 

Then in your formatting function using jquery you will get the value from the data description

 formatter: function(value) { var description = $('#ex13').attr("data-description") return value+' '+description; } 

if your jquery version is> 1.4.3 then you should use $('#ex13').data("description")

Answer 2

You cannot pass the Ruby method (in this case @project.trl.description ) to the JavaScript library (in this case bootstrap-slider ).

I don't know what the @project.trl.description method does, but you have to override this method in JavaScript and pass it like this:

 $('#ex13').slider({ ... // other options formatter: function(value) { return 'Current value: ' + value; } });