CODEWITHSUNDEEP
jqueryhtmljquery-uislideraddition
Dennis
Dennis

Reputation: 47

jQuery UI - Inject/add character before last value

Basic slider, ranging from 10-1000 with 20 between each step (10-30-50-etc).

What I want to do is, add/inject a character before the value on the last step (1000).

Right not it returns as "560 kr/h" or "400 kr/h" and that's all good. But when at 1000 I'd like it to become ">1000 kr/h".

Below is my setup.

HTML

<label for="value1" class="value">Mitt pris:</label>
<input type="text" id="value1" />kr/h
<div id="slider1"></div>

jQuery

$(function() {
    $( "#slider1" ).slider({
        value: 300,
        min: 10,
        max: 1000,
        step: 20,
        slide: function( event, ui ) {
            $( "#value1" ).val(ui.value );}
    });
        $( "#value1" ).val( $( "#slider1" ).slider( "value" ) );

});

Upvotes: 0

Views: 171

Answers (2)

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

While there are other ways to do it, a simple if statement after you set the value should be all you need:

    slide: function( event, ui ) {
        $( "#value1" ).val(ui.value );
        if ($( "#value1" ).val == 1000) { $( "value1" ).val(">1000");} }

This is a more concise way, but possibly harder to read

    slide: function( event, ui ) {
        $( "#value1" ).val(ui.value == 1000 ? ">1000" : ui.value );}

It's good design to actually make this settor a function, so you can use it in both places where you set value1:

$(function() {
    var setValue = function(value) {
        $("#value1").val(value == 1000 ? ">1000" : value); };
    $( "#slider1" ).slider({
        value: 300,
        min: 10,
        max: 1000,
        step: 20,
        slide: function( event, ui ) {
            setValue(ui.value);}
    });
    setValue($( "#slider1" ).slider( "value" ) );
});

Upvotes: 1

RMalke
RMalke

Reputation: 4094

Try: 

$(function() {
    $( "#slider1" ).slider({
        value: 300,
        min: 10,
        max: 1000,
        step: 20,
        slide: function( event, ui ) {             
            $( "#value1" ).val(ui.value == 1000 ? '> 1000' : ui.value );
        }
    });
    $( "#value1" ).val( $( "#slider1" ).slider( "value" ) );
});

Here's the fiddle

Upvotes: 0

Related Questions