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

【问题标题】：How can i position a jqueryui slider below an image如何将 jqueryui 滑块定位在图像下方
【发布时间】：2017-08-30 14:36:11
【问题描述】：

我正在尝试构建一个范围滑块来选择地质时间间隔，因此希望范围滑块准确定位在图像下方。我几乎已经完成了这个工作，事实上我有一个版本只要我不包含声明就可以工作，否则滑块会坚决停留在图像上方 - 这也是它在 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>

$(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%;
}

【问题讨论】：

标签： html css jquery-ui jquery-ui-slider

【解决方案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：我真的很喜欢你的滑块应用！ :)

【讨论】：

您可能需要将旋钮加长一点，以便它们伸出到刻度的末端。我认为你的设计师应该能够做到这一点。
非常感谢 - 这已经解决了这个问题。我还用更正的版本更新了 jsfiddle。注意如果顶部设置为 -60，那么滑块的高度是正确的
我很快/在正确测试之前谈过。使用您的解决方案，滑块宽度与图像宽度无关，因此它需要进入由绝对/相对 div 对定义的框内，但您让我走上了正确的轨道，现在正确的版本就在小提琴上跨度>