1

Подскажите, как сделать по бокам ползунка отступ, чтобы нельзя было передвинуть ползунок к самому краю?
введите сюда описание изображения

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
$( "#slider-range" ).slider({
  range: true,
  min: 0,
  max: 500,
  values: [ 75, 300 ],
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
  }
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
  " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script>
</head>
<body>
 
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
 
 
</body>
</html>

5
  • Просто стиль изменить? или значения по краям есть но ползунок все ровно не будет прокручиваться? Commented 12 июн. 2017 в 8:33
  • @Razmik Galstyan,два ползунка берут ширину от общего родителя. Стилями не получается добавить отступ
    – word
    Commented 12 июн. 2017 в 8:41
  • нужен код. можете добавить в вопрос? Commented 12 июн. 2017 в 8:42
  • @Razmik Galstyan, добавил
    – word
    Commented 12 июн. 2017 в 9:04
  • значения вам нужны от 0 - 500? или если отступ будет то например будет у вас 10 - 490? Commented 12 июн. 2017 в 9:29

1 ответ 1

2

Вот мой пример реализации, я добавил контейнер и сделал у него отступы, и немного стили добавил. Если что то не так вы хотели скажите пересмотрю ответ.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
        $( function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 500,
                values: [ 75, 300 ],
                slide: function( event, ui ) {
                  $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                }
            });
            $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +  " - $" + $( "#slider-range" ).slider( "values", 1 ) );
        });
  </script>
  <style>
      .slider-range-container{
          border: 1px solid #c5c5c5;
          background: #FFFFFF;
          padding-left: 30px;
          padding-right: 30px;
          border-radius: 3px;
      }
      #slider-range{
          border: none;
      }
  </style>
</head>
<body>
 
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div class="slider-range-container">
    <div id="slider-range"></div>
</div>
 
 
</body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.