Rails 4 - Bootstrap Slider - dynamically populating tooltips on data ticks?

Question

I'm trying to use a bootstrap slider in my Rails 4 app.

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

I'm trying to dynamically populate the tool tip text based on the data slider value.

In my view, 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. That table has attributes called level (an integer) and description (text).

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

I can see from the docs 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%>"
    });

That doesnt work. How do I use the formatter function in my slider?

TAKING ASHITAKA'S SUGGESTION

I tried amending 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%>";
        }
    });

}); 

That attempt prints out the <%= @project.trl.description%> instead of taking the content of that attribute and printing it out. So, the next step to implementing this concept is how can I pass data saved in the database to the js tooltip?

Answer 1

Try to add the description value to a data attribute in the input element, so when the input is rendered in the html the 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 formatter function , using jquery you 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 a Ruby method (in this case @project.trl.description) to a JavaScript library (in this case bootstrap-slider).

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

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