Javascript Slider input näkyviin muokkaussivulle

Halusin muuttaa tavoitteenmuokkaussivua niin, että tavoitteen täyttymisasteen saisi valita sliderilla sen sijaan, että kirjoittaisi numeron.

Railsissa on oma liukuri-input range_field. Sainkin sen toimimaan formissa muuten hienosti, mutta ui:lla ei näkynyt mikä luku oli valittuna, vain tuo liukuri. Minua valistettiin, etten saa valittua lukua muuten näkyviin kuin laittamalla mukaan javascriptiä. Rails-sivuhan luodaan kerran ja se on sitten siinä, mutta javascriptillä saisi sivua muutettua lennossa esimerkiksi päivittämällä sivulle sen valitun luvun sen mukaan, miten liukuria liu'uttaa.

Javascript-liukurin saaminen sivulle arvonäyttöineen ei ollutkaan ihan yksinkertainen tehtävä. Allaolevilla keinoilla se kuitenkin onnistui. Mukana on myös liukurin värin vaihtaminen sen mukaan, mitä arvoa se näyttää.

En ole vielä löytänyt neuvoa siihen, miten saan liukurin arvon lähetettyä formin mukana controlleriin. Eli tässä on vasta puolet ratkaisusta.

.erb

<%= content_tag :div, class: "progress_information", data: {progress: @goal.progress} do %>
<% end %>

...

<div id="slaideri"></div>
(<span id="slaideriteksti"></span>)

goals.js

function setSliderColor() {
    var progress = $( "#slaideri" ).slider( "value" );
    if (progress >= 0 && progress < 17) {
        $( "#slaideri .ui-slider-range" ).css( "background", "#FF0000" );
        $( "#slaideri" ).css( "background", "#FF0000" );
    } else if (progress >= 10 && progress < 33) {
        $( "#slaideri .ui-slider-range" ).css( "background", "#cc3300" );
        $( "#slaideri" ).css( "background", "#cc3300" );
    } else if (progress >= 20 && progress < 50) {
        $( "#slaideri" ).css( "background", "#996600" );
        $( "#slaideri .ui-slider-range" ).css( "background", "#996600" );
    } else if (progress >= 30 && progress < 66) {
        $( "#slaideri" ).css( "background", "#669900" );
        $( "#slaideri .ui-slider-range" ).css( "background", "#669900" );
    } else if (progress >= 40 && progress < 83) {
        $( "#slaideri" ).css( "background", "#33cc00" );
        $( "#slaideri .ui-slider-range" ).css( "background", "#33cc00" );
    } else if (progress >= 50 && progress <= 100) {
        $( "#slaideri" ).css( "background", "#00FF00" );
        $( "#slaideri .ui-slider-range" ).css( "background", "#00FF00" );
    }

    $( "#slaideriteksti" ).text( progress );
   
}

function initializeSlider() {
    $( "#slaideriteksti" ).text( $( "#slaideri" ).slider( "value" ) );
    setSliderColor();
}

$(function () {
    $("#slaideri").slider({
        range: "min",
        value: $('.progress_information').data('progress'),  //edit-sivun content-tag div antaa tiedon
        min: 0,
        max: 100,
        step: 1,
        create: initializeSlider,
        slide: setSliderColor,
        change: setSliderColor
    });
});

application.js

//= require goals

application.css

 *= require_self
 *= require_tree .
 *= require main
 *= require jquery-ui
*/