Search code examples
javascriptjqueryjquery-pluginssliderround-slider

Round slider textbox always visable


I am using http://roundsliderui.com/demos.html round slider library. I want to show the editable textbox always show not hide. Thank you


Solution

  • Understand, you should supply the code and can get help or suggestions from people here. I took the example you provided and made some changes.

    Here is a Working Example: http://jsfiddle.net/Twisty/Lorej7up/

    HTML

    <div class="slider-wrapper">
      <div id="slider">
      </div>
      <input type="text" id="myToolTip" class="rs-input rs-tooltip-text" style="height: 27px; width: 32px;" />
    </div>
    

    CSS

    .slider-wrapper {
      position: relative;
    }
    
    .slider-wrapper input.rs-input {
      position: absolute;
      top: 95px;
      left: 93px;
      z-index: 100;
    }
    

    jQuery

    function updateToolTip() {
      $("#myToolTip").val($("#slider").roundSlider("option", "value"));
    }
    $(function() {
      $("#slider").roundSlider({
        sliderType: "min-range",
        radius: 110,
        width: 10,
        startAngle: 90,
        value: "82",
        showTooltip: false,
        editableTooltip: false,
        drag: updateToolTip,
        change: updateToolTip
      });
      $("#myToolTip").val($("#slider").roundSlider("option", "value"));
      $("#myToolTip").change(function() {
        $("#slider").roundSlider("option", "value", $(this).val());
      });
    });