我如何将 jqueryui 滑块定位在图像下方

Question

我正在尝试构建一个范围滑块以 select 一个地质时间间隔，因此需要一个准确定位在图像下方的范围滑块。我几乎已经开始工作了，事实上我有一个版本只要我不包含声明就可以工作，否则滑块坚决停留在图像上方 - 这也是它在 jsfiddle 中所做的。我可能混淆了 css，但真的欢迎一些建议 - 一个好的解决方案可以广泛应用。

这里有一个 jsfiddle jsfiddle of timescale selctor

HTML

Current window 
<input type="text" name="amount" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
<div class="geoframe">
<div class="sliderpos_inframe">
<div id="geoslider-range"></div>
<img id="tscaleimage" src="http:www.mikrotax.org/Nannotax3/graphics/timescale-narrow-rotated.png"/>
</div>

JS

$(document).ready(function() {
var gettop, getbase; 
gettop=12; getbase=50;

 $( "#geoslider-range" ).slider({
  range: true, min: 0, max: 210,
  values: [gettop, getbase ],
  slide: function( event, ui ) {
  $ ( "#top" ).val( ui.values[ 0 ]);
    $ ( "#base" ).val( ui.values[ 1 ]);
    $( "#amount" ).val( ui.values[ 0 ] + "Ma - " + ui.values[ 1 ] +"Ma" );
  } });
//output the values
$ ( "#top" ).val( $( "#geoslider-range" ).slider( "values", 0));
$ ( "#base" ).val( $( "#geoslider-range" ).slider( "values", 1)); 
$( "#amount" ).val( $( "#geoslider-range" ).slider( "values", 0 ) +
  "Ma - " + $( "#geoslider-range" ).slider( "values", 1 ) + "Ma" ); 
} );

CSS

    /* size of the box and positioning of slider over image */
.geoframe {
    width: 850px;
    height: 230px;
    position: relative;
    display: block;
    background-color: white;
    border: 0 solid yellow;
    margin-bottom: 10px;
    }

.sliderpos_inframe {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 25px;
    right: 25px;
    background-color: white;
    }

#tscaleimage {
    width: 100%;
   position: absolute;
 top: 0;
 }
   /* vertical position  */
 #geoslider-range .ui-slider {
    position: relative;
    top: 165;
    z-index: 2;
    text-align: left;
}

 #geoslider-range .ui-slider-handle {
      background: url(http:www.mikrotax.org/Nannotax3/graphics/slider4.png)  no-repeat;
      border: none;
    position: absolute;
    top: -148px;
    margin-left: -17px;
    z-index: 3;
    width: 35px;
    height: 175px;
    cursor: default;
    outline: 0 none;
}

/* the coloured box indicating range selected */
#geoslider-range .ui-slider-range {
    position: absolute;
    z-index: 2;
    font-size: 2em;
    display: block;
    border: 0;
    background-position: 0 0;
    top: 0%;
    height: 100%;
}

Answer 1

我刚刚更改了标记和 CSS。请在下面找到它们：

HTML

<body>
    <b>AGE WINDOW TO SEARCH WITHIN</b>
    <p>Current window
        <input type="text" name="amount" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
        <div class="geoframe">
            <div class="sliderpos_inframe">
                <img id="tscaleimage" src="http:www.mikrotax.org/Nannotax3/graphics/timescale-narrow-rotated.png" />
            </div>
        </div>
        <div id="geoslider-range"></div>
    </p>
</body>

CSS

/* size of the box and positioning of slider over image */

.geoframe {
    width: 850px;
    height: 230px;
    position: relative;
    display: block;
    background-color: white;
    border: 0 solid yellow;
    margin-bottom: 10px;
}

.sliderpos_inframe {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 25px;
    right: 25px;
    background-color: white;
}

#tscaleimage {
    width: 100%;
    position: absolute;
    top: 0;
}


/* vertical position  */

#geoslider-range {
    position: relative;
    top: -50px;
    text-align: left;
    left: 25px;
}

#geoslider-range .ui-slider-handle {
    background: url(http:www.mikrotax.org/Nannotax3/graphics/slider4.png) no-repeat;
    border: none;
    position: absolute;
    top: -148px;
    margin-left: -17px;
    z-index: 3;
    width: 35px;
    height: 175px;
    cursor: default;
    outline: 0 none;
}


/* the coloured box indicating range selected */

#geoslider-range .ui-slider-range {
    position: absolute;
    z-index: 2;
    font-size: 2em;
    display: block;
    border: 0;
    background-position: 0 0;
    top: 0%;
    height: 100%;
}

希望这对你有用。

结果是：

PS：我真的很喜欢你对滑块的应用！ :)

我如何将 jqueryui 滑块定位在图像下方

How can i position a jqueryui slider below an image

html

css

jquery-ui

jquery-ui-slider