0

I am new to Javascript and Jquery. I started making changes in business rules by Chris Powers. https://github.com/chrisjpowers/business-rules I want to add a range slider in numbers and want to add a number spinner also. I have tried using open source sliders. But the problem I faced is if I place the slider's html in plain html file then it is rendering. But since we want it dynamically generated therefore trying through javascript is not giving the required results, it just shows a blank text field.

Example: (from jquery-UI)

<div class="slider-range"></div>//this works

But if tried from javascript like: 

var input = $("<div>",{"class":" slider-range rem "});
$this.after(input);

this creates a blank input text box. I thought that the supporting javascript is not read when inside another file hence I wrote in my header like:

<script>
        $(function() {
        $( ".slider-range" ).slider({
        range: true,
        min: 0,
        max: 100,
        values: [ 75, 100 ],
        slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
        });
        $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) +
        " - $" + $( ".slider-range" ).slider( "values", 1 ) );
        });

    </script>

it still doesn't seem to work. I apologize for my ignorance but I have tried hard to get it working. Please give me some hope.

Seyed Hamed Shams
  • 615
  • 9
  • 22
FrontEnd-ra
  • 5
  • 5

1 Answers1

0

I created a DEMO FIDDLE It seems to be working fine.

var input = $("<div>",{"class":" slider-range rem"});
$("#empty").after(input);

$( ".slider-range" ).slider({
        range: true,
        min: 0,
        max: 100,
        values: [ 75, 100 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });

    $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) + " - $" + $( ".slider-range" ).slider( "values", 1 ) );
CodeGodie
  • 12,116
  • 6
  • 37
  • 66
  • OMG how stupid of me. I have been struggling with this the last 28 hours or so. It started working after I put $(".slide-ranger")... after the line $("#empty").after(input). is there a way you could figure out where to place your javascript, and if the slide-range code is in another file then how to call it right after $("#empty").after(input)? Though I am very happy with the results now. thanks a million and happy coding – FrontEnd-ra Oct 29 '14 at 16:25
  • It should always work as long as your javascript link tag is placed after the `$("#empty").after(input)` – CodeGodie Oct 29 '14 at 17:01