我正在尝试创建本网站上给出的对数 slider https://www.enplug.com/pricing?plan=annual&displays=5&devices=5 我在这里取得了一些成功，但无法匹配滴答声，这是我的 HTML/JS 代码。 我正在使用 jQuery bootstrap slider
这里是完整的代码片段
$(document).ready(function () {
// Without JQuery
var slider = new Slider('#ex15', {
min: 1,
max: 1000,
scale: 'logarithmic',
value:1,
step: 1,
});
$("#ex15").on("slide", function (slideEvt) {
$(".ex15SliderVal").val(slideEvt.value);
$(".tick-text").each(function (data, index) {
$(this).attr("selected", false);
})
});
$(".ex15SliderVal").bind('keyup change click input', function () {
var GetValue = $(this).val();
slider.setValue(GetValue);
});
$(".tick-text").on('click', function () {
var GetValue = $(this).attr('data-id');
var Item = $(this);
slider.setValue(GetValue);
$(".ex15SliderVal").val(GetValue);
$(".tick-text").each(function (data,index) {
$(this).attr("selected",false);
})
Item.attr("selected", true);
})
}); .w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
}
.calculator-form {
font-family: 'Raleway';
}
.calculator-form section.pricing-container .header {
margin: 0 0 12px;
text-align: left;
font-size: 26px;
line-height: 1;
font-weight: 400;
color: #1d242c;
}
.calculator-form section.pricing-container .description {
margin: 0;
padding: 0;
text-align: left;
font-size: 14px;
line-height: 17px;
color: #53595e;
}
.slider-track {
background-image: none;
background-image: none;
background-repeat: no-repeat;
filter: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 4px;
/*Hide the default slider*/
display: none !important;
}
.calculator-form section.pricing-container {
padding: 18px 30px;
border: 1px solid #d3dbe2;
background-color: #fafafa;
}
.calculator-form section.pricing-container .form-columns {
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
justify-content: space-between;
}
.calculator-form section.pricing-container .form-columns .left-column {
width: 255px;
margin-right: 45px;
}
.calculator-form section.pricing-container .form-columns .right-column {
display: flex;
justify-content: flex-end;
flex-grow: 1;
align-items: center;
}
.calculator-form section.pricing-container .number-input {
width: 76px;
height: 40px;
padding-left: 0;
padding-right: 0;
border: 1px solid #d3dbe2;
border-radius: 3px;
text-align: center;
color: #396ebc;
font-family: Roboto;
font-size: 24px;
font-weight: 400;
-moz-appearance: textfield;
}
.calculator-form section.pricing-container .display-slider {
flex-grow: 1;
position: relative;
margin-right: 0;
margin-left: 25px;
}
.calculator-form section.pricing-container .display-slider .ticks-container, .slider.slider-horizontal .slider-tick-label-container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 13px;
padding-top: 8px;
margin-left: -3px;
}
.calculator-form section.pricing-container .display-slider .ticks-container .tick-text {
color: #1d242c;
font-size: 14px;
font-weight: 400;
font-family: Roboto;
cursor: pointer;
}
.calculator-form section.pricing-container .display-slider .ticks-container .tick-dot {
font-size: 12px;
margin-top: -1px;
}
.calculator-form section.pricing-container .display-slider .ticks-container .tick-text:hover {
opacity: .75;
color: #356bba;
}
.calculator-form section.pricing-container .display-slider .ticks-container .tick-text[selected=true], .tick-text[selected=selected] {
color: #356bba !important;
}
.calculator-form section.pricing-container .display-slider .toggle, .slider-handle {
position: absolute;
width: 24px;
height: 24px;
border-radius: 16px;
background-color: #356bba;
box-shadow: 0 0 5px rgba(0,0,0,.5);
cursor: pointer;
/*top: 30px;*/
top: -11px;
}
.slider.slider-horizontal {
width: 100%;
height: 32px;
}
.calculator-form section.pricing-container .display-slider .track, .slider.slider-horizontal .slider-track {
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
height: 2px;
background-color: #d3dbe2;
margin-bottom: 12px;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
justify-content: space-between;
}
.hide {
display: none;
}
.calculator-form section.pricing-container .display-slider .track .tick {
margin-top: -2px;
width: 2px;
height: 6px;
background-color: #d3dbe2;
}
.calculator-form section .pricing-card.selectable[selected=selected] {
border-width: 4px;
border-color: #4468b8;
color: #4468b8;
}
.calculator-form section .pricing-card.selectable {
cursor: pointer;
}
.calculator-form section .pricing-card {
align-self: flex-start;
width: 276px;
margin-bottom: 10px;
padding: 4px 6px 6px;
background: #fff;
border: 1px solid #d3dae1;
border-radius: 3px;
color: #333941;
}
.calculator-form section .pricing-card.selectable:not([selected=selected]) {
padding-bottom: 0;
color: #777b7f;
}
.calculator-form section .pricing-card.selectable:not([selected=selected]) .pricing-card-content {
margin: 3px;
}
.calculator-form section .pricing-card-content {
padding: 12px 10px;
line-height: 1;
}
.calculator-form section .pricing-card.selectable:not([selected=selected]) .pricing-card-hint {
display: none;
}
.calculator-form section .pricing-card-hint.special-offer--colored-text {
color: #6ec84d;
}
.calculator-form section .pricing-card-hint.special-offer {
background: #eff9ed;
border-color: #c0e8b3;
}
.calculator-form section .pricing-card-hint {
padding: 4px 9px 3px;
text-align: right;
font-size: 13px;
font-weight: 500;
background: #eaeff8;
border: 1px solid #adbfe1;
border-radius: 3px;
}
.calculator-form section .pricing-card-header {
margin-bottom: 20px;
font-size: 26px;
line-height: 1;
text-align: left;
}
.calculator-form section .pricing-card-description {
font-size: 16px;
text-align: right;
}
.calculator-form section .pricing-card-description .rate-summary {
font-family: Roboto;
font-size: 22px;
font-weight: 500;
}
.calculator-form section .pricing-card-description .monthly-price {
margin-bottom: -2px;
}
.calculator-form section .pricing-card-description .rate-hint {
font-size: 14px;
margin-top: 3px;
}
.calculator-form section .pricing-card-description .license-count strong {
margin: 0 7px 0 10px;
}
.calculator-form section .pricing-card-description strong {
font-family: Roboto;
font-size: 32px;
font-weight: 500;
}
.calculator-form section .pricing-card-description .license-count {
margin-top: 6px;
}
.calculator-form section .pricing-card-description {
font-size: 16px;
text-align: right;
}
.calculator-form section .pricing-card-hint.special-offer--colored-text {
color: #6ec84d;
}
.calculator-form section .pricing-card-hint.special-offer {
background: #eff9ed;
border-color: #c0e8b3;
}
.calculator-form section .pricing-card-hint strong {
font-family: Roboto;
font-size: 15px;
font-weight: 500;
}
.calculator-form section .pricing-card-description strong {
font-family: Roboto;
font-size: 32px;
font-weight: 500;
}
.calculator-form section .pricing-card-hint.special-offer {
background: #eff9ed;
border-color: #c0e8b3;
}
.calculator-form section .pricing-card-hint {
padding: 4px 9px 3px;
text-align: right;
font-size: 13px;
font-weight: 500;
background: #eaeff8;
border: 1px solid #adbfe1;
border-radius: 3px;
}
.calculator-form section .pricing-card.selectable:not([selected=selected]) {
padding-bottom: 0;
color: #777b7f;
}
.calculator-form section .pricing-card + .pricing-card {
margin-left: 26px;
}
.section-light {
font-weight: 300;
}
.calculator-form section .pricing-card.selectable:not([selected=selected]) hr {
border-top: 2px solid #979ca2;
}
.calculator-form section .pricing-card hr {
margin: 13px 0 15px;
border-top: 2px solid #333941;
}
.calculator-form section .pricing-container hr {
height: 1px;
border: none;
border-top: 1px solid #d3dbe2;
margin: 25px 0;
}
.calculator-form section .pricing-card.selectable[selected=selected] hr {
border-top: 2px solid #4468b8;
}
.calculator-form section .pricing-card.selectable:not([selected=selected]):hover {
box-shadow: 0 0 11px rgba(33,33,33,.2);
}
@media (min-width: 769px) {
.mobile-only {
display: none !important;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pricing</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.min.js" type="text/javascript"></script>
</head>
<body >
<div class="w-container">
<div class="calculator-form">
<section class="pricing-container">
<div class="form-columns">
<div class="left-column">
<div class="header">Software Licenses</div>
<p class="description desktop-only">
Use the slider to select the number of displays you want to use with Enplug software. You'll need one software license per display.
</p>
</div>
<div class="right-column">
<input class="number-input ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-min ex15SliderVal" type="number" min="1" value="1">
<div class="display-slider">
<div class="ticks-container">
<div class="tick-text" data-display-count="1" data-id="1" selected="true">1</div>
<div class="tick-dot">●</div>
<div class="tick-text" data-display-count="2" data-id="2" selected="false">2</div>
<div class="tick-dot">●</div>
<div class="tick-text" data-display-count="5" data-id="5" selected="false">5</div>
<div class="tick-dot">●</div>
<div class="tick-text" data-display-count="10" data-id="10" selected="false">10</div>
<div class="tick-dot">●</div>
<div class="tick-text" data-display-count="30" data-id="30" selected="false">30</div>
<div class="tick-dot">●</div>
<div class="tick-text" data-display-count="100" data-id="100" selected="false">100</div>
<div class="tick-dot">●</div>
<div class="tick-text" data-display-count="250" data-id="250" selected="false">250</div>
<div class="tick-dot">●</div>
<div class="tick-text" data-display-count="1000" data-id="1000" selected="false">1,000</div>
</div>
<div class="track">
<div class="tick"></div>
<input id="ex15" type="text" data-slider-min="1" data-slider-max="1000" />
<div class="tick"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="form-columns" ng-hide="isEnterpriseOffer()">
<div class="left-column">
<div class="header">Plan Type</div>
</div>
<div class="right-column">
<div class="pricing-card selectable" ng-selected="isAnnualPlanSelected" ng-click="setPlanType('annual')" selected="selected">
<div class="pricing-card-content">
<div class="pricing-card-header">Annual Plan</div>
<div class="pricing-card-description">
<div class="monthly-price">
<strong class="ng-binding">$54.00</strong>/month
<span class="mobile-only">per License</span>
</div>
<div class="rate-hint desktop-only">
Per License
</div>
<div class="license-count">
x<strong class="ng-binding">5</strong>License<span ng-show="pricingParams.displays !== 1">s</span>
</div>
</div>
<hr>
<div class="pricing-card-description">
<div class="rate-summary ng-binding">
$3,240.00
</div>
<div class="rate-hint">
Charged Annually
</div>
</div>
</div>
<div class="pricing-card-hint special-offer special-offer--colored-text">
You are saving<br>
<strong class="ng-binding">$360.00</strong> /year
</div>
</div>
<div class="pricing-card selectable" ng-selected="isMonthlyPlanSelected" ng-click="setPlanType('monthly')">
<div class="pricing-card-content">
<div class="pricing-card-header">Monthly Plan</div>
<div class="pricing-card-description">
<div class="monthly-price">
<strong class="ng-binding">$60.00</strong>/month
<span class="mobile-only">per License</span>
</div>
<div class="rate-hint desktop-only">
Per License
</div>
<div class="license-count">
x<strong class="ng-binding">5</strong>License<span ng-show="pricingParams.displays !== 1">s</span>
</div>
</div>
<hr>
<div class="pricing-card-description">
<div class="rate-summary ng-binding">
$300.00
</div>
<div class="rate-hint">
Charged Monthly
</div>
</div>
</div>
<div class="pricing-card-hint">
Upgrade to Annual Plan and save<br>
<strong class="ng-binding">$360.00</strong> /year
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>我想让它完全像上面链接中显示的那样 https://www.enplug.com/pricing?plan=annual&displays=5&devices=5
刻度部分不正确， slider 位置为 2，刻度数为 5。 我已阅读 bootstrap-slider 文档，但无法实现相同的布局。
最佳答案
您是否支持该 slider 的响应式设计？ 我刚刚在 jsfiddle 中检查过它，但是 slider (蓝色球)的位置根本不正确。 看起来你设置了flex-grow: 1;，但是class(slider-horizontal)的宽度是固定的，所以div(ticks-container)的宽度与
然而，你可以这样实现；那就是使用 Bootstrap slider 勾选选项。 这样，您就不必担心这种问题，因为基本上，插件可以保证正确运行。 不过，标签位置有一些工作(底部→顶部)。 For Example
var mySlider = new Slider("#test-slider", {
min: 1,
max: 1000,
step: 1,
ticks: [0, 100, 200, 300, 500, 1000],
ticks_labels: ["<a href='#test'>0</a>","100","200","300","500","1000"],
ticks_positions: [0, 20, 40 , 60 , 80 , 100]
});
关于javascript - 带刻度的对数 jQuery Bootstrap slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51443781/