CSS를 현재

Question

Here is a link to my JSFiddle

사용하여 텍스트 상자 후 달러 텍스트 상자 전에 기호와 "K"를 추가하는 방법, 당신은 슬라이더 막대를 이동 할 수 있으며, 텍스트 입력이 변경됩니다 0에서 100

질문 : 내가 텍스트 상자와 텍스트 상자 후 'K'앞에 '$'를 추가하고 싶습니다 - 20 $ 20K로 표시됩니다 즉, 50이 나타 $ 50,000

바람직으로 , '$'와 'k'를 추가하기 위해 CSS를 사용하고 싶습니다. 따라서 값은 영향을받지 않습니다.

HTML :

<div id="container"> 
<input id="min" type="text" class="sliderValue" data-index="0" value="1" /> 
<div id="slider"></div> 
</div> 

CS :

#container { 
width:200px; 
margin:40px;} 

#min, #max { 
width: 50px; 
height:40px; 
border: none; 
text-align: center; 
font: normal 24px verdana;} 

JS를 (위의 jsfiddle 링크에서 볼 수 있듯이) 내가 지금까지 무엇을 가지고

:

$(document).ready(function() { 
$("#slider").slider({ 
    range: false, 
    min: 0, 
    max: 100, 
    step: 1, 
    values: [1], 
    slide: function (event, ui) { 
     for (var i = 0; i < ui.values.length; ++i) { 
      $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 
     }; 
     var delay = function() { 
      var handleIndex = $(ui.handle).data('index.uiSliderHandle'); 
      var label = handleIndex == 0 ? '#min' : '#max'; 
      $(label).html(ui.value).position({ 
       my: 'center top', 
       at: 'center bottom', 
       of: ui.handle, 
       offset: "0, -74" 
      }); 
     }; 
     setTimeout(delay, 0); 
    } 
}); 
$("input.sliderValue").change(function() { 
    var $this = $(this); 
    $("#slider").slider("values", $this.data("index"), $this.val()); 
    var handle = $(this).attr('id') == 'min' ? 0 : 1; 
    $(this).position({ 
     my: 'center top', 
     at: 'center bottom', 
     of: $('a.ui-slider-handle:eq(' + handle + ')'), 
     offset: "0, -54" 
    }); 
}); 
$('#min').html($('#slider').slider('values', 0)).position({ 
    my: 'center top', 
    at: 'center bottom', 
    of: $('#slider a:eq(0)'), 
    offset: "0, -54" 
}); 
$('#max').html($('#slider').slider('values', 1)).position({ 
    my: 'center top', 
    at: 'center bottom', 
    of: $('#slider a:eq(1)'), 
    offset: "0, -54" 
    }); 
}); 

Answer 1

생활 예 : http://jsfiddle.net/qaU7K/92/

그냥 처음에 기본 값을 추가 :이 들어

$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 

:

는

<input id="min" type="text" class="sliderValue" data-index="0" value="$1k" /> 

그런 다음이 줄을 변경

$("input.sliderValue[data-index=" + i + "]").val("$" + ui.values[i] + "k"); 

그리고 만드는 div 조금 더 큰 그것의 width을 바꾸는 :

#min, #max { 
    width: 76px; /*modified*/ 
    height:40px; 
    border: none; 
    text-align: center; 
    font: normal 24px verdana; 
} 

생활 예 : http://jsfiddle.net/qaU7K/92/