0

我正在尝试创建本网站上给出的对数滑块 https://www.enplug.com/pricing?plan=annual&displays=5&devices=5 我在这里取得了一些成功,但无法匹配刻度,这是我的 HTML /JS 代码。我正在使用 jQuery引导滑块

完整的代码片段在这里

$(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">●&lt;/div>
                            <div class="tick-text" data-display-count="2" data-id="2" selected="false">2</div>
                            <div class="tick-dot">●&lt;/div>
                            <div class="tick-text" data-display-count="5" data-id="5" selected="false">5</div>
                            <div class="tick-dot">●&lt;/div>
                            <div class="tick-text" data-display-count="10" data-id="10" selected="false">10</div>
                            <div class="tick-dot">●&lt;/div>
                            <div class="tick-text" data-display-count="30" data-id="30" selected="false">30</div>
                            <div class="tick-dot">●&lt;/div>
                            <div class="tick-text" data-display-count="100" data-id="100" selected="false">100</div>
                            <div class="tick-dot">●&lt;/div>
                            <div class="tick-text" data-display-count="250" data-id="250" selected="false">250</div>
                            <div class="tick-dot">●&lt;/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中所示

刻度部分不正确,滑块位置为 2,刻度数为 5。我已阅读 bootstrap-slider 文档但无法实现相同的布局。

4

1 回答 1

1

您是否支持该滑块中的响应式设计?我刚刚在 jsfiddle 中检查了它,但是滑块(蓝色球)的位置根本不正确。看来您设置了flex-grow: 1; ,但是类(滑块水平)的宽度是固定的,因此 div(ticks-container)的宽度首先与它的宽度不同。

但是,您可以这样实现;即使用 Bootstrap 滑块刻度选项。这样,您就不必担心这个问题,因为基本上,插件可以保证正确运行。但是,标签位置有一些工作(底部→顶部)。 例如

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]
});
于 2018-07-22T14:14:33.740 回答