No Answer Option

[MartH78]

Hi there, I want to add a "no answer option" by a button added under the slider.

On click the slider shall be set on zero.

is this possible?

Thanks for answer, Mart

[IonDen]

Yes, you can use update or reset sliders methods. Check demos for more details.

[MartH78]

Thanks, but how can it be done?

My code:

<input type="text" class="js-range-slider" name="f85" value=""   />
 $(".js-range-slider").ionRangeSlider({
/*skin:"round", dünner schwarzer Strich */ 
skin:"big",
min:"0",
max:"10", 
placeholder:"none",
hide_min_max:"true",
 background: "green",

 onChange: function (data) {
           document.form1.jaclick.value=0;

        },

});

function Reset_Checkbox

 $(".js-range-slider").ionRangeSlider({
reset

        },

});

<div class="resetbutton" id="1" onclick="Reset_Checkbox('noanswer','',1)" return false;">No Answer</div>

[IonDen]

Check the demo: https://jsfiddle.net/IonDen/ngrwzv6a/

[MartH78]

great, thanks! The only problem ist: If someone clicks "no answer", value for no answer is 1, slider value is zero. After that I can still move the slider and would have a value 1 for no answer and for example 5 for the slider. Is it possible to disable the slider, when I click no answer?

[IonDen]

Yes, add param disable: true

[MartH78]

ok, that works, is it possible to get this example for download as a basis?

[IonDen]

I did not understand your question

[MartH78]

I tried to script it but it doesnt work. Question was if there is an runnable example I can download. Or if someone can help me with my code:

html>       
 head>
   meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
   title>$title
   link rel="stylesheet" href="css/formate.css" type="text/css">
   style type="text/css">
   body {
    margin: 60px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.range-slider {
    position: relative;
    height: 80px;
}
   /style>
 /head>
 !--Plugin CSS file with desired skin-->
    link rel="stylesheet" href="css/ion.rangeSlider.min.css"/>

    !--jQuery-->
    script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    !--Plugin JavaScript file-->
    script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js">/script>

 script src="http://code.jquery.com/jquery-1.7.2.min.js"> 

script>
var $range = $(".js-range-slider");
var $noAnswer = $(".js-no-answer")

$range.ionRangeSlider({
    skin: "modern",
    type: "single",
    min: 0,
    max: 10,
    from: 5
});

var instance = $range.data("ionRangeSlider");
$noAnswer.on("click", function () {
    instance.update({
        from: 0
    });
});
/script>
body>

 FORM name="f1" ACTION="f2.php" METHOD="POST">

   hr noshade size="3">

  div class="range-slider">
    input type="text" class="js-range-slider" value="" />
/div>

button class="js-no-answer">
    No answer
/button>

     hr noshade size="3">

 /form>

/body>
/html>

[IonDen]

@MartH78 this is off-topic already. Check any online courses/tutorials, how to build your web page and how to install scripts

[MartH78]

sorry this does not help me. I asked for a complete runnable example to download.

[IonDen]

Use this page as reference: http://ionden.com/a/plugins/ion.rangeSlider/index.html

Press "view source"

[MartH78]

thanks a lot but I cannot find a "view source" button on this page?

[IonDen]

Right click on page -> view source in context menu

[MartH78]

;) ok I will give up it seems it is not useful enough for me...